将数据保存为CSV文件时，新窗口和不正确的文件名

Question

我正在从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生成适当的扩展名，以及如何在不打开新选项卡的情况下下载文件。

​

​

我已经尝试过的

1. Export to CSV using jQuery and html

Answer 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();

});

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