Json 到 CSV 转换文件名无效

Question

我已经编写了 javascript 代码来将 json 转换为要下载的 csv 文件。除了一个文件在文件名问题方面存在问题外，每个文件都可以使用正确的文件名进行完美转换和下载。在 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 分析代码有生产条件，因此 Google 分析在本地主机和开发测试环境中被忽略.

有人建议使用 encodeURI 或 encodeURIComponent 而不是转义来对 csv 字符串进行编码，我应用了它们，因为在我看来这是一个 csv 字符串编码问题。 但最终对我有用的是下面给出的

link.target = "_blank";

它是如此简单和小巧但合乎逻辑，我没有注意到我没有在代码中找到它并在 JSON 上的其他人 post 上找到它到 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";

Json 到 CSV 转换文件名无效

Json to CSV convert Filename is invalid

javascript

json

export-to-csv