VUE项目通过blob下载文件,并做浏览器兼容处理
1.业务需求:
- vue项目对后端接口返回的response处理下载流文件(注意文件类型),并做下载兼容处理。
2.解决方案:
-
第1步是处理后端返回的流文件数据(注意:请求PDF文档流数据的接口时,post请求:
params,{responseType:'blob'}
,get请求:{params:params,responseType:'blob'}
,excel:application/vnd.ms-excel;charset=utf-8
,pdf:application/octet-stream;charset=utf-8
,txt:可以不写): -
// // 申明blob及类型,res为接口返回数据 let blob = new Blob([res], { type: 'application/octet-stream;charset=utf-8' }) if (window.navigator && window.navigator.msSaveOrOpenBlob) { // 兼容IE window.navigator.msSaveOrOpenBlob(blob,fileName); // 可以自定义文件名称及后缀 } else { // 兼容Google及fireFox var a = document.createElement('a') document.body.appendChild(a) a.style = 'display: none' var url = window.URL.createObjectURL(blob) // 创建url a.href = url a.download = fileName a.click() a.remove() window.URL.revokeObjectURL(url) // 释放url }