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

Question

我已将现有数据转换为 text/csv 并能够在 Chrome 中下载文件，但是在 iPad 或 Mac 上尝试使用 Safari 时，它会打开一个名为 "unknown"/"Untitled" 的选项卡。 这是我正在使用的代码 -

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

无论如何我可以将下载的文件显示为Safari的“purchase.csv”。

Answer 1

试试这个

 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;

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";

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

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