从json字符串创建可下载的CSV - create a downloadable csv from a json string

create a downloadable csv from a json string

本文关键字：下载 CSV 创建 json 字符串 | 更新日期: 2023-09-27

Target: write&下载以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) my Download()函数，它想要下载我的csv文件

<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，实际上输出只是一行

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

ii)我不能设置文件名和扩展名，事实上下载的文件是"download"，没有扩展名，包含上面提到的单行

首先，您需要确保您的数据是这种格式，就像下面的示例一样。

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);