将数据保存为 CSV 文件时出现新窗口和错误的文件名答案

【问题标题】：New window and incorrect filename when saving data as CSV file将数据保存为 CSV 文件时出现新窗口和错误的文件名
【发布时间】：2020-04-25 10:01:41
【问题描述】：

我从 Ajax 请求中获取了一些 CSV 数据。我正在尝试使用 FileSaver.js (https://github.com/eligrey/FileSaver.js/) 使最终用户能够直接将此数据下载为 CSV 文件。

这是我的 Ajax 请求处理程序中使用的代码。

            jQuery.post(urlPrefix + "/api/ReportData",
                    dataToPost,
                    function (data, status) {

                        var blob = new Blob([data], { type: "text/csv" });
                        var fileName = "";
                        fileName += "Data-Export";
                        fileName += ".csv";
                        saveAs(blob, fileName);

                    });

此代码从按钮单击事件中调用。每当执行代码时，都会打开一个新选项卡，并保存文件而不使用 csv 扩展名。事实上，下载的文件根本没有扩展名。有关详细信息，请参阅随附的屏幕截图。 (7) 是因为这是我的第七次下载。

保存的实际文件是有效文件。如果我手动将其扩展名设置为 csv，我可以正常使用它。 但我想知道如何使用 FileSaver 生成适当的扩展名，并在不打开新标签的情况下下载文件。

我已经尝试过的

Export to CSV using jQuery and html

【问题讨论】：

标签： javascript csv filesaver.js

【解决方案1】：

我找到了这个链接https://code-maven.com/create-and-download-csv-with-javascript，可以在其中创建隐藏的锚标记并下载文件。

我的新代码如下

jQuery.post(urlPrefix + "/api/ReportData",
                    dataToPost,
                    function (data, status) {

                        var hiddenElement = document.createElement('a');
                        hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(data);
                        hiddenElement.target = '_blank';
                        hiddenElement.download = 'Exported-Data.csv';
                        hiddenElement.id = "customTemporaryAnchor";
                        hiddenElement.click();

                        jQuery("#customTemporaryAnchor").remove();

});

执行此代码时，文件会以适当的扩展名下载，并且没有任何弹出窗口或新选项卡。

【讨论】：