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

【问题标题】：Safari Issue : Downloaded file name is "Unknown" JavascriptSafari 问题：下载的文件名为“未知”Javascript
【发布时间】：2015-11-15 05:00:38
【问题描述】：

我已将现有数据转换为 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();

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

【问题讨论】：

标签： javascript angularjs html download safari

【解决方案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;

【讨论】：

【解决方案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();
});

【讨论】：