vue使用blob下载文件遇到的问题小结

江海阔评

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取。
在项目中遇到需求，需要将后端返回的二进制流下载成 excel 表格形式，首先，先写一个方法用来下载

1. export function fileDownload(res) {
   
2.   let blob = new Blob([res.data], {
   
3.     type: res.data.type,
   
4.   })
   
5.   let downloadElement = document.createElement('a')
   
6.   let href = window.URL.createObjectURL(blob) //创建下载链接
   
7.   let fileName = res.headers['content-disposition']
   
8.     ? res.headers['content-disposition'].split('attachment;filename=')[1]
   
9.     : new Date().getTime()
   
10.   downloadElement.href = href
    
11.   // window.open(downloadElement.href)
    
12.   downloadElement.download = decodeURIComponent(fileName) //解码
    
13.   document.body.appendChild(downloadElement)
    
14.   downloadElement.click()
    
15.   document.body.removeChild(downloadElement)
    
16.   window.URL.revokeObjectURL(href) //释放掉blob对象
    
17. }

复制代码

当然，也可以使用自定义的文件名，自己传递一个文件名即可

1. export function downloadFile(res, fileName) {
   
2.   const blob = new Blob([res.data], { type: res.data.type })
   
3.   let dom = document.createElement('a')
   
4.   let url = window.URL.createObjectURL(blob)
   
5.   dom.href = url
   
6.   dom.download = decodeURI(fileName)
   
7.   dom.style.display = 'none'
   
8.   document.body.appendChild(dom)
   
9.   dom.click()
   
10.   dom.parentNode.removeChild(dom)
    
11.   window.URL.revokeObjectURL(url)
    
12. }

复制代码

需要注意的是，要记得在下载接口的地方加上  responseType: 'blob',

切记，一定要加上 responseType: 'blob',  否则下载的会乱码甚至读取不出来
加上之后，在需要使用的地方使用即可

1. async handleSubmit() {
   
2.       if (this.form.pushDepartment.length === 0) {
   
3.         this.$message.warning(`推送部门不能为空`)
   
4.         return false
   
5.       }
   
6.       // 导出excel表格
   
7.       let params = {
   
8.         healthCodeAlarmIds: [],
   
9.         sendDepartment: [],
   
10.       }
    
11.       this.selectData.forEach((item) => {
    
12.         let id = parseInt(item.id)
    
13.         params.healthCodeAlarmIds.push(id)
    
14.       })
    
15.       params.sendDepartment = this.form.pushDepartment
    
16.       let res = await exportInfo({ ...params })
    
17.       // console.log('res', res)
    
18.       fileDownload(res)
    
19.       // downloadFile(res, 'yj.xlsx')
    
20.     },

复制代码

到此这篇关于vue使用blob下载文件遇到的问题的文章就介绍到这了,更多相关vue blob下载文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/316126k1p.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！