JavaScript使用Blob文件流下载txt、pdf、图片等文件，自定义下载文件名

JavaScript使用Blob文件流下载txt、pdf、图片等格式文件,同时自定义下载文件名。

Blob（Binary Large Object）表示二进制类型的大对象。在数据库管理系统中，将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在 JavaScript 中 Blob 类型的对象表示不可变的类似文件对象的原始数据。

原理

要检查创建文件是否有效，需要访问它，并进行下载。

实现的方式是生成一个包含对文件引用的链接。然后，让 JavaScript 出发时间 click 来点击链接，这样文件就可以下载了。

为了接收文件 URL，需要使用 URL.createObjectURL() 方法将接收文件对象作为参数。然后，通过设置链接的下载属性，指定保存的文件默认名称。

最后，在 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使用Blob下载文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！