基于blob对象，模拟a标签，实现下载文件

最新推荐文章于 2025-06-18 15:11:21 发布

原创最新推荐文章于 2025-06-18 15:11:21 发布 · 480 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

1.请求头设置responseType

headers:{
   'responseType': "blob"
 },

2.在组件中调用

//调用方法，获取后台返回的二进制数据流
this.operateRecordLoad().then((res)=>{
	/**
	生成blob对象
	拼接\uFEFF避免中文乱码问题（也可以由后端配置好，则不用拼接\uFEFF），
	设置文件格式，不设置默认为txt
	**/
   let blob = new Blob(['\uFEFF'+res],{type: "application/vnd.ms-excel;chartset=utf-8"});
   
   //创建a标签
   let link = document.createElement('a');
   let objectUrl = URL.createObjectURL(blob);
   //将a标签的href指向数据流
   link.setAttribute("href",objectUrl);
   let fileName = 'export-'+ new Date().getTime() + '.csv'
   //设置a标签的download属性，及文件名
   link.setAttribute("download",fileName); 
   //触发a标签点击
   link.click();
   //释放blob对象，避免内存溢出
   window.URL.revokeObjectURL(link.href)
 })