JavaScript使用Blob文件流下载txt、pdf、图片等文件，自定义下载文件名
更新时间：2023年08月06日 16:35:49 投稿：yin
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下载文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
TypeScript 是一种强类型的超集 JavaScript,它为开发者提供了静态类型检查、代码提示以及更好的可维护性,本文将深入解析 TypeScript 装饰器,从基础概念到高级用法,逐步探讨其作用、原理以及实际应用场景,以帮助你更好地理解和利用这一功能,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了微信小程序模板消息限制实现无限制主动推送的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要为大家详细介绍了JavaScript实现美化滑块效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
这篇文章主要介绍了浅谈JS中几种轻松处理'this'指向方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要介绍了javascript实现文字无缝滚动，文字可以实现上下滚动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
TypeScript 不可变性 readonly, Readonly＜T＞的使用小结
TypeScript 作为 JavaScript 的超集,为我们提供了强大的类型系统,其中就包括了实现不可变性的有效工具,今天,我们就来聊聊如何使用 readonly和 Readonly来提升代码的健壮性和可维护性2026-05-05
有关IE6下拉框图层问题，一直困扰着大家，下面有个不错的方法大家可以尝试操作下2014-01-01
本文介绍如何使用JavaScript原生代码实现文本折叠展开效果,并提供方法指导如何在Vue或React等框架中修改实现,详细介绍了创建整体框架、设置样式及利用JS控制元素的步骤,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-10-10
httpclient模拟登陆具体实现(使用js设置cookie)
最简单的方法就是通过得到的cookie定制一个httpclient，感兴趣的朋友可以了解下本文2013-12-12
这篇文章主要介绍了js防止DIV布局滚动时闪动的解决方法,通过js的window.requestAnimationFrame来解决这一问题,非常具有实用价值,需要的朋友可以参考下2014-10-10
最新评论