没有链接的 JavaScript blob 文件名

Question

通过 window.location 强制下载时，如何在 JavaScript 中设置 blob 文件的名称？

function newFile(data) {
    var json = JSON.stringify(data);
    var blob = new Blob([json], {type: "octet/stream"});
    var url  = window.URL.createObjectURL(blob);
    window.location.assign(url);
}

运行上面的代码会立即下载一个文件，而无需刷新页面，如下所示：

bfefe410-8d9c-4883-86c5-d76c50a24a1d

我想将文件名设置为 my-download.json 。

原文由 Ash Blue 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我知道的唯一方法是 FileSaver.js 使用的技巧：

1. 创建一个隐藏的 <a> 标签。

2. 将其 href 属性设置为 blob 的 URL。

3. 将其 download 属性设置为文件名。

4. 单击 <a> 标记。

这是一个简化的示例（ jsfiddle ）：

 var saveData = (function () {
 var a = document.createElement("a");
 document.body.appendChild(a);
 a.style = "display: none";
 return function (data, fileName) {
 var json = JSON.stringify(data),
 blob = new Blob([json], {type: "octet/stream"}),
 url = window.URL.createObjectURL(blob);
 a.href = url;
 a.download = fileName;
 a.click();
 window.URL.revokeObjectURL(url);
 };
 }());

 var data = { x: 42, s: "hello, world", d: new Date() },
 fileName = "my-download.json";

 saveData(data, fileName);

我写这个例子只是为了说明这个想法，在生产代码中使用 FileSaver.js 代替。

笔记

• 较旧的浏览器不支持“下载”属性，因为它是 HTML5 的一部分。

• 浏览器认为某些文件格式不安全，下载失败。保存带有 txt 扩展名的 JSON 文件对我有用。

原文由 kol 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我只是想通过支持 Internet Explorer（无论如何，大多数现代版本）来扩展已接受的答案，并使用 jQuery 整理代码：

 $(document).ready(function() {
    saveFile("Example.txt", "data:attachment/text", "Hello, world.");
});

function saveFile (name, type, data) {
    if (data !== null && navigator.msSaveBlob)
        return navigator.msSaveBlob(new Blob([data], { type: type }), name);
    var a = $("<a style='display: none;'/>");
    var url = window.URL.createObjectURL(new Blob([data], {type: type}));
    a.attr("href", url);
    a.attr("download", name);
    $("body").append(a);
    a[0].click();
    window.URL.revokeObjectURL(url);
    a.remove();
}

这是一个示例 Fiddle 。 祝你好运。

原文由 Alexandru 发布，翻译遵循 CC BY-SA 4.0 许可协议