Safari问题：下载的文件名为“未知” Javascript

Question

我已经将我的现有数据转换为文本/ csv格式，并能够在Chrome中下载该文件，但是当在iPad或Mac上使用Safari尝试时，它会打开一个名称为“未知”/“无标题”的选项卡。这是我正在使用的代码 -

var hiddenElement = document.createElement('a');                        
hiddenElement.href = 'data:text/csv,'+ encodeURI(response);
hiddenElement.target = '_blank';
hiddenElement.download = 'purchase.csv';
hiddenElement.click();

有没有办法让我在Safari中将下载的文件显示为"purchase.csv"？

- Satyaki

Answer 1

Try this one

var a = document.createElement('a');
a.setAttribute("href",URL);
a.setAttribute("target", "_blank");
var dispatch = document.createEvent("HTMLEvents");
dispatch.initEvent("click", true, true);
a.dispatchEvent(dispatch);
return false;

- Arun Shinde

Answer 2

如果数据是本地的 - 很容易！我们只需使用window.URL.createObjectURL()。让我们设置一些全局变量...

//var response = Already defined by OP!  Not sure what it is, but it's data to save.
var mimetype = "text/csv";
var filename = "purchase.csv";

现在我们只需通过将 type 参数设置为 window.URL.createObjectURL() 来设置标题...

a.href = window.URL.createObjectURL(new Blob([response], {
    encoding: "UTF-8",
    type: mimetype + ";charset=UTF-8",
}));

如果数据在WEB上 -- 仍然很容易，只需要更多的努力！

我们可以通过使用XMLHTTPRequest()下载文件数据，使用window.URL.createObjectURL()将数据转换为具有MIME类型标头的blob类型，然后按照设置a.download = filename;和a.click();的方式正常进行。

一个用于直接将文件数据下载到JavaScript环境的抽象函数...

function load(url, callback) {
  var xhr = new XMLHTTPRequest();
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) callback(xhr.responseText);
  };
  xhr.open("GET", url, true);
}

然后下载数据，建立链接，点击它：

load("site.com/t.txt", function (contents) {
    var a = window.document.createElement('a');
    a.href = window.URL.createObjectURL(new Blob([response], {
        encoding: "UTF-8",
        type: mimetype + ";charset=UTF-8",
    }));
    a.download = filename;

    document.body.appendChild(a);
    a.click();
    a.remove();
});

- HoldOffHunger