【vue】将后端返回的二进制流前端进行处理实现下载文件

前言

最近在做后台，有个功能是导出文件，后端传过来的是二进制流，需要前端进行处理，才能下载文件。第一次接触这个，记录一下。

一、接口处理

设置接口请求类型：responseType:‘blob’

export function downloadExcelApi(data) {
  return request.get(url,data,{responseType:'blob'});
}

因为后端返回的是这样的二进制流，也没有返回状态码，所以会被拦截，需要在request.js文件对返回的状态码进行处理

else if (!res.code) {
  return resolve(data, res);
}

如果后端有返回状态码就不需要这一步。这里的话不知道后面会不会出问题，暂时也没想到别的实现方法。

二、下载处理

1.请求

这里要看后端返回的数据，如果内容存在res.data里面就相应地将res.data传给下面这个方法。

async download(id, name) {
  try {
    const res = await downloadExcelApi(data);
    // console.log(res)
    this.createExcel(res,name)
  } catch (error) {
    this.$message.error(error);
  }
},

2.处理数据

createExcel(res, name) {
  let blob = new Blob([res], {
    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
  });
  let fileName = name ;
  // 允许用户在客户端上保存文件
  if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, fileName);
  } else {
    var link = document.createElement("a");
    link.href = window.URL.createObjectURL(blob);
    link.download = fileName;
    link.click();
    //释放内存
    window.URL.revokeObjectURL(link.href);
  }
},

这里blob的type要根据实际情况进行修改，比如我这里后端传过来的是

三、Content-Type

这是在网上搜集的关于 content-type 的部分媒体类型

".*"="application/octet-stream"  
".001"="application/x-001"  
".301"="application/x-301"  
".323"="text/h323"  
".906"="application/x-906"  
".907"="drawing/907"  
".a11"="application/x-a11"  
".acp"="audio/x-mei-aac"  
".ai"="application/postscript"  
".aif"="audio/aiff"  
".aifc"="audio/aiff"  
".aiff"="audio/aiff"  
".anv"="application/x-anv"  
".asa"="text/asa"  
".asf"="video/x-ms-asf"  
".asp"="text/asp"  
".asx"="video/x-ms-asf"  
".au"="audio/basic"  
".avi"="video/avi"  
".awf"="application/vnd.adobe.workflow"  
".biz"="text/xml"  
".bmp"="application/x-bmp"  
".bot"="application/x-bot"  
".c4t"="application/x-c4t"  
".c90"="application/x-c90"  
".cal"="application/x-cals"  
".cat"="application/vnd.ms-pki.seccat"  
".cdf"="application/x-netcdf"  
".cdr"="application/x-cdr"  
".cel"="application/x-cel"  
".cer"="application/x-x509-ca-cert"  
".cg4"="application/x-g4"  
".cgm"="application/x-cgm"  
".cit"="application/x-cit"

.doc     application/msword
.docx   application/vnd.openxmlformats-officedocument.wordprocessingml.document
.rtf       application/rtf
.xls     application/vnd.ms-excel application/x-excel
.xlsx    application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.ppt     application/vnd.ms-powerpoint
.pptx    application/vnd.openxmlformats-officedocument.presentationml.presentation
.pps     application/vnd.ms-powerpoint
.ppsx   application/vnd.openxmlformats-officedocument.presentationml.slideshow
.pdf     application/pdf
.swf    application/x-shockwave-flash
.dll      application/x-msdownload
.exe    application/octet-stream
.msi    application/octet-stream
.chm    application/octet-stream
.cab    application/octet-stream
.ocx    application/octet-stream
.rar     application/octet-stream
.tar     application/x-tar
.tgz    application/x-compressed
.zip    application/x-zip-compressed
.z       application/x-compress
.wav   audio/wav
.wma   audio/x-ms-wma
.wmv   video/x-ms-wmv
.mp3 .mp2 .mpe .mpeg .mpg     audio/mpeg
.rm     application/vnd.rn-realmedia
.mid .midi .rmi     audio/mid
.bmp     image/bmp
.gif     image/gif
.png    image/png
.tif .tiff    image/tiff
.jpe .jpeg .jpg     image/jpeg
.txt      text/plain
.xml     text/xml
.html     text/html
.css      text/css
.js        text/javascript
.mht .mhtml   message/rfc822

四、responseType

""  responseType 设为空字符串与设置为"text"相同，默认类型
"text"  返回的是包含在 DOMString 对象中的文本。
"document"  返回的是一个 HTML Document 或 XML XMLDocument
"arraybuffer"  返回的是一个包含二进制数据的 JavaScript ArrayBuffer 
"blob"  返回的是一个包含二进制数据的 Blob 对象
"json"  返回的是一个 JavaScript 对象 。这个对象是通过将接收到的数据类型视为 JSON 解析得到的。
"ms-stream"  返回的是下载流的一部分 ；此响应类型仅允许下载请求，并且仅受Internet Explorer支持

————————————————