javascript - 在 Firefox 中导出 javascript 生成的 csv 仅导出第一行，在 chrome 中工作正常

Question

这在大约 2 个月前运行良好，突然 Firefox 不喜欢除了第一行之外的任何内容。然而，在调试代码时，data 变量包含完整的 CSV 文档。但是，一旦文件下载完毕，我只能得到第一行。这在 Chrome 中有效，我确实觉得有点奇怪，因为它过去在两者中都有效。

关于如何解决这个问题有什么建议吗？

下面是我的导出脚本。

PerformanceTableController.prototype.exportSplitTimes = function () {
    var resultListId,
        resultList,
        columnId,
        csv = [],
        csvContent,
        row,
        i, l,
        filename,
        data,
        link;

    for (resultListId in this.raceData.resultLists) {
        if (this.raceData.resultLists.hasOwnProperty(resultListId)) {
            resultList = this.raceData.resultLists[resultListId];

            csv.push(this.getCSVClassTitle(resultList));
            csv.push(this.getCSVColumnHeaders());

            for (i = 0, l = resultList.performanceList().length; i < l; i += 1) {
                row = [];

                for (columnId in resultList.performanceList()[i]) {
                    if (resultList.performanceList()[i].hasOwnProperty(columnId)) {
                        if (resultList.performanceList()[i][columnId].value !== undefined) {
                            row.push(resultList.performanceList()[i][columnId].value);
                        }
                    }
                }

                csv.push(row.join(","));
            }
            console.log(csv);
        }
    }

    if (csv.length === 0) {
        return;
    }

    filename = this.raceData.race.event.name + ' - ' + this.raceData.race.name + '.csv';

    csvContent = csv.join("\n");
    if (!csvContent.match(/^data:text\/csv/i)) {
        csvContent = 'data:text/csv;charset=utf-8,' + '\uFEFF' + csvContent;
    }
    data = encodeURI(csvContent);

    link = document.createElement('a');
    link.setAttribute('href', csvContent);
    link.setAttribute('download', filename);
    link.style.display = 'none';
    // Without this line, Firefox is not able to open the CSV
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
};

Answer 1

Firefox 对 URI 中设置的字符比 Chrome 更加挑剔。有些字符(如#)是保留字符，如果您的数据包含其中之一，您的文件下载将失败。

您已经调用了 encodeURI，但您是在完整的 URI 上执行此操作，而您应该保持 header 不编码。

因此更改 csvContent = 'data:text/csv;charset=utf-8,' + '\uFEFF' + csvContent;到 csvContent = 'data:text/csv;charset=utf-8,' +encodeURIComponent(csvContent); 并删除稍后出现的 encodeURI(csvContent) 应该可以修复您的问题问题。