axios下载后端返回的blob数据流

6,414 阅读1分钟

axios设置响应类型,获取blob、filename,1.创建a标签下载,销毁a标签 2.IE浏览器下载

axios({
  method:'...',
  url:'...',
  // `responseType` 表示服务器响应的数据类型,可以是 'arraybuffer', 'blob', 'document', 'json','text', 'stream'
  responseType:'blob'
}).then(res => {
    const {headers, data} = res,
    // 从响应头中获取文件名,*如果network中能看到content-disposition,代码无法获取,需后端配置
    filename = decodeURI(headers["content-disposition"].split("filename=")[1]),
    blob = new Blob([data], {type: headers["content-type"]});
    saveAs(blob, filename)
})

// 保存到本地
function saveAs(blob,filename) {
    if ('download' in document.createElement('a')) {
         const eleA = document.createElement('a');
         eleA.download = filename
         eleA.style.display = 'none';
         eleA.href = URL.createObjectURL(blob);
         document.body.appendChild(eleA);
         eleA.click();
         URL.revokeObjectURL(eleA.href); //释放URL对象
         document.body.removeChild(eleA);
   } else {
       // IE下载
       navigator.msSaveOrOpenBlob(blob, filename)
   }
}