如何在 JavaScript 中下载 Blob 文件时设置自定义文件名？

JavaScript：为直接下载的 Blob 文件设置文件名

当使用 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，按照以下步骤操作：

创建一个隐藏的;标记并将其附加到文档中：

var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";

设置 将标签的 href 属性添加到 blob 的 URL，并将 download 属性添加到所需的文件名：

a.href = url;
a.download = "my-download.json";

通过单击 触发下载标记：

a.click();

撤销 Blob 的 URL 以防止再次访问它：

window.URL.revokeObjectURL(url);

示例实现：

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

注释：

较旧的浏览器可能不支持下载属性。
• 某些文件格式（例如，JSON）可能需要使用不同的扩展名（例如，txt）保存以避免安全限制。
• 考虑使用 FileSaver.js 等库来获得更强大、更可靠的解决方案。

以上是如何在 JavaScript 中下载 Blob 文件时设置自定义文件名？的详细内容。更多信息请关注PHP中文网其他相关文章！