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

【问题标题】：create a downloadable csv from a json string从 json 字符串创建可下载的 csv
【发布时间】：2026-01-12 02:35:01
【问题描述】：

目标：写入&下载一个以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) 我的 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) 我无法设置文件名和扩展名，实际上下载的文件是“下载”，没有包含上述单行的扩展名

【问题讨论】：

如果您已经拥有数据服务器端（正如<?php echo $json_string ?> 建议的那样）——那您为什么不在 PHP 中处理创建下载输出呢？
这意味着创建另一个要调用的 .php 文件，不是吗。如果是这样，我会避免这种情况。
这意味着另一个请求，是的。这就是您要在这里避免的——那么我至少会在服务器端创建 Data URI 值，而不是在客户端进行......
无论如何，如果你想这样做：你至少应该使用encodeURIComponent对你放入URI的数据进行URL编码。否则，它可能包含简单地破坏格式的字符/字节值。
因为数据已经在服务器端，为什么不设置一个服务器端调用，以您想要的方式为您提供数据？我不熟悉 PHP，但你能完成所有工作，包括创建文件并下载结果吗？我很想知道 PHP 是否可以做到这一点。

标签： javascript php json csv data-conversion

【解决方案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);

【讨论】：