不带链接的 JavaScript blob 文件名

javascript html download blob html5-filesystem

2022-08-30 00:21:14

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

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。

答案 1

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

创建隐藏标记。<a>
将其属性设置为 Blob 的 URL。href
将其下载属性设置为文件名。
点击标签。<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代替。

笔记

较旧的浏览器不支持“download”属性，因为它是HTML5的一部分。
浏览器认为某些文件格式不安全，下载失败。使用txt扩展名保存JSON文件对我有用。

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

这是一个小提琴的例子。神速。