JavaScript 利用 Blob 对象与 URL.createObjectURL 实现自定义文件名下载

在 JavaScript 开发中，利用 Blob 文件流可以实现对 txt、pdf、图片等多种格式文件的下载，并支持自定义保存时的文件名。

Blob（Binary Large Object）即二进制大对象，在数据库系统中通常用于存储影像、声音或多媒体文件等二进制数据集合。在 JavaScript 环境里，Blob 类型的对象代表了一种不可变的、类似文件对象的原始数据。

实现原理

核心思路在于验证文件生成的有效性，通过访问该文件对象来触发下载流程。

具体实现方式是生成一个指向该文件资源的链接，随后利用 JavaScript 触发 click 事件来模拟用户点击该链接，从而启动文件下载过程。

为了获取文件的临时 URL，需调用 URL.createObjectURL() 方法，将接收到的文件对象作为参数传入。接着，通过设置链接元素的 download 属性，明确指定下载时默认保存的文件名称。

最后一步是将该链接元素挂载到 DOM 中，触发点击操作后，立即将其从 DOM 中移除，以保持页面整洁。

示例方法代码

function downLoadEvent(path) {
  const fileNametitle = document.title+'.'+path.split('?')[0].split('.').slice(-1)[0];
  const downloadRes = async () => {
      let response = await fetch(path); 
      let blob = await response.blob();  
      let objectUrl = window.URL.createObjectURL(blob);
      let a = document.createElement('a');
      a.href = objectUrl;
      a.download = fileNametitle;
      a.click();
      a.remove(); 
   }
  downloadRes();
}

其中 path 为文件的绝对路径；document.title 代表网页标题，此处可替换为期望的自定义文件名；path.split('?')[0].split('.').slice(-1)[0] 用于提取 path 参数中的文件后缀名。

调用示例：downLoadEvent("https://www.***.com/upload/test.txt")

至此，关于利用 JavaScript Blob 文件流下载 txt、pdf、图片等文件并自定义文件名的介绍完毕。如需了解更多相关 JavaScript 下载文件的内容，建议搜索本站历史文章或继续阅读后续相关文章，感谢支持。