Question

目标：编写并下载以json字符串开头的csv文件，例如包含

的data.csv

col1,col2,col3
"324","19-08-2014","13000"
"325","19-08-2014","5010"

到目前为止我做了什么：

1）iframe和按钮调用我的转换函数

<iframe id="frame" style="display:none"></iframe>
<form><input type="submit" value="Export CSV" onclick="javascript:Download();"></form>

2）我想下载我的csv文件的Download（）函数

<script type="text/javascript">
    function Download(){
        var csv=ConvertToCSV(<?php echo $json_string ?>);
        var url='data:application/csv,'+csv;
        var _iframe_dl = $('<iframe />')
        .attr('src', url)
        .hide()
        .appendTo('body');
    };
 </script>

3）我的json到csv转换函数试图创建一个csv字符串

<script type="text/javascript">
function ConvertToCSV(json) {
    var array = typeof json != 'object' ? JSON.parse(json) : json;
    var str = '';
    for (var i = 0; i < array.length; i++) {
        var line = '';
        for (var index in array[i]) {
            if (line != '') line += ','
                line += '"'+array[i][index]+'"';
        }
        str += line + "\r\n";
    }
    return str;
}
</script>

遇到问题：

i）它似乎无法识别\ r \ n，infact输出只是一行

"324","19-08-2014","13000""325","19-08-2014","5010"

ii）我无法设置文件名和扩展名，实际上下载的文件是“下载”，没有包含上述单行的扩展名

Answer 1

首先，您需要确保您的数据采用此格式，如下例所示。

var array = [["col1","col2","col3"],["324","19-08-2014","13000"],["324","19-08-2014","13000"]]

然后你需要创建csv变量，如下所示

var csv = "data:text/csv;charset=utf-8,";

之后你需要循环遍历你的数据数组并将每一行追加到你刚才设置的csv变量。

array.forEach(function(arrayItem, index){

   arrayAsString = arrayItem.join(",");
   csv += index < array.length ? arrayAsString+ "\n" : arrayAsString;

});

现在要为此文件命名并创建下载链接，您必须创建一个隐藏的锚节点并设置其下载属性。

var encUri = encodeURI(csv);
var link = document.createElement("a");
link.setAttribute("href", encUri);
link.setAttribute("download", "file_name.csv");
//add anchor element to body    
document.body.appendChild(link);
link.click();

修改在Chrome上测试过，也可以在Safari上使用。由于我现在要看一下的某些原因，在Firefox上不起作用

我发现如果你将链接添加到页面正文中，那么Firefox会启动下载，你可以使用这样的代码。我已更新上面的代码

document.body.appendChild(link);

从json字符串创建可下载的csv

1 个答案: