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

自定义 Blob 文件名以在 JavaScript 中直接下载

简介

使用 window.location 时要在 JavaScript 中强制下载 blob 文件，会自动生成下载的文件的名称。要自定义此文件名，需要执行其他步骤。

使用 FileSaver.js 技巧的解决方案

一种解决方法涉及利用类似于 FileSaver.js 所采用的技术：

1. 创建一个隐藏的
2. 将 blob 的 URL 分配给 href 属性。
3. 使用 download 属性设置所需的文件名。
4. 通过单击 启动下载。

简化示例

function saveData(data, fileName) {
  var json = JSON.stringify(data),
      blob = new Blob([json], {type: "octet/stream"}),
      url = window.URL.createObjectURL(blob);
  var a = document.createElement("a");
  document.body.appendChild(a);
  a.style = "display: none";
  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 的使用

虽然上面的方法可以工作中，建议使用更强大的 FileSaver.js 库进行文件保存JavaScript：

import { saveAs } from 'file-saver';

var json = JSON.stringify(data),
    filename = "my-download.json";

var blob = new Blob([json], {type: "octet/stream"});
saveAs(blob, filename);

注意事项

• 较旧的浏览器可能不支持下载属性，因为它是 HTML5 功能。
• 某些文件格式可能被认为不安全并阻止下载。使用 .txt 扩展名保存 JSON 文件可以缓解此问题。

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