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

在 JavaScript 中设置自定义 Blob 文件名

在 JavaScript 中处理 Blob 时，您可能会遇到需要指定自定义 Blob 文件名的情况文件名而不是默认随机生成的文件名。当您想要为下载或数据导出提供有意义的文件名时，这特别有用。

问题：分配自定义 Blob 文件名

以下代码片段创建一个blob 并尝试通过 window.location 下载它，但下载的文件有一个随机名称，例如"bfefe410-8d9c-4883-86c5-d76c50a24a1d":

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

解决方案：使用 A 标签技巧

分配自定义文件名的唯一已知方法JavaScript 中的 blob 涉及使用隐藏的 的技巧。标签：

1. 创建隐藏的
2. 将其 href 属性设置为 blob 的 URL。
3. 将其下载属性设置为所需的文件名。
4. 单击 以编程方式标记。

示例代码：

以下示例演示如何使用此技巧将 JSON 对象保存到名为"my-download.json":

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

注意：

• 较旧的浏览器可能不支持下载属性。
• 某些文件格式可能不受浏览器支持，并可能导致下载失败。例如，已观察到以 .txt 扩展名保存 JSON 文件是可行的。

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