没有链接的 JavaScript blob 文件名

Question

通过 window.location 强制下载 blob 文件时如何在 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。

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 文件对我有用。