Json 到 CSV 转换文件名无效

Question

我已经编写了将 json 转换为 csv 文件以供下载的 javascript 代码。每个文件都可以完美地转换并使用正确的文件名下载，除了一个文件存在文件名问题。在 Chrome 上，使用 abc_def_ghi.csv 之类的命名约定下载其他文件，但只有使用“下载”文件名下载的文件没有 csv 扩展名。但是，当您“打开方式”记事本时，它会显示正确的 csv 数据。我不确定它有什么问题。同样的问题也出现在 Firefox 上，除了它设置了一些不符合约定的文件名并设置了扩展名，但每次文件名都更改为相同的 csv。

这是 Firefox 要求“保存”时的屏幕截图

这是下载两次的同一个 csv 文件的文件名。

这是从 chrome 下载的文件的屏幕截图。

这是我编写的将 json 转换为 csv 并下载的代码。

function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {
                //If JSONData is not an object then JSON.parse will parse the JSON string in an Object
                var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;

                var CSV = '';
                //Set Report title in first row or line

                //CSV += ReportTitle + '\r\n\n';

                //This condition will generate the Label/Header
                if (ShowLabel) {
                    var row = "";

                    //This loop will extract the label from 1st index of on array
                    for (var index in arrData[0]) {

                        //Now convert each value to string and comma-seprated
                        row += index + ',';
                    }

                    row = row.slice(0, -1);

                    //append Label row with line break
                    CSV += row + '\r\n';
                }

                //1st loop is to extract each row
                for (var i = 0; i < arrData.length; i++) {
                    var row = "";

                    //2nd loop will extract each column and convert it in string comma-seprated
                    for (var index in arrData[i]) {
                        row += '"' + arrData[i][index] + '",';
                    }

                    row.slice(0, row.length - 1);

                    //add a line break after each row
                    CSV += row + '\r\n';
                }

                if (CSV == '') {
                    alert("Invalid data");
                    return;
                }

                //Generate a file name
                var fileName = "";
                //this will remove the blank-spaces from the title and replace it with an underscore
                fileName += ReportTitle.replace(/ /g, "_");

                //Check for ie
                var ie = getInternetExplorerVersion();
                if (ie == -1) {
                    //Initialize file format you want csv or xls
                    var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);

                    // Now the little tricky part.
                    // you can use either>> window.open(uri);
                    // but this will not work in some browsers
                    // or you will not get the correct file extension    

                    //this trick will generate a temp <a /> tag
                    var link = document.createElement("a");
                    link.href = uri;

                    //set the visibility hidden so it will not effect on your web-layout
                    link.style.visibility = "hidden";
                    link.download = fileName + ".csv";

                    //this part will append the anchor tag and remove it after automatic click
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                } else {
                    var blob = new Blob([CSV], { type: "text/csv;charset=utf-8;" });
                    navigator.msSaveBlob(blob, fileName + ".csv")
                }
            }

Answer 1

谢天谢地，经过几天的努力，我已经解决了这个问题。找到文件名问题的原因我真的很恐慌。感谢我的队友，在我对问题是由 Google Analytics 引起的问题感到失望后，他透露。由于我们仅在生产环境中遇到此问题，而不是在本地主机或开发测试站点上，而且 Google Analytics 代码具有生产条件，因此 Google Analytics 在本地主机和开发测试环境中被忽略。

有人建议使用 encodeURI 或 encodeURIComponent 而不是 escape 来编码 csv 字符串，我应用了它们，因为在我看来这是一个 csv 字符串编码问题。 但最终对我有用的内容如下所示

link.target = "_blank";

它是如此简单和小但合乎逻辑，我没有注意到我在代码中没有它，而是在其他人关于 JSON 到 CSV 转换代码的帖子中找到它。

希望这对任何因“Google Analytics”而面临文件名问题的开发人员有所帮助

Answer 2

let csvContent =  exampleDatas.map(e => e.join(",")).join("\n");
var link = document.createElement("a");
link.href = "data:text/csv;charset=utf-8,"+encodeURIComponent(csvContent);
link.download = "abc_def_ghi.csv";
link.click();

在下载使用时获取文件名：

link.download = "abc_def_ghi.csv";