前端下载文件流方法

做项目时遇到一个需求，需要导出表格，后端返回了文件流，让我们自己转成excel

1.先封装一下

export function dataToFile (params) {
  let type = params.type;
  let fileName = params.fileName;
  let data = params.data;
  // 兼容 IE
  if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(new Blob([data]), fileName);
  } else {
    // 非IE 浏览器
    const url = window.URL.createObjectURL(new Blob([data], { type }));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', `${fileName}`);
    document.body.appendChild(link);
    link.click();
    window.URL.revokeObjectURL(url); // 释放内存
  }
}

2.设置一下接口。接口添加了responseType，用来指定后台返回响应数据的类型，其中

’arraybuffer‘返回的是包含二进制数据的JavaScriptArraybuffer。

 getAttachmentByNameList: (fileName, filePath) => 
 axios.get('getAttachmentByName?fileName=' + fileName + '&filePath=' + filePath, {
    responseType: 'arraybuffer'
  })

3.调用下载，击时候去拿到下载文件的下载文件名，下载数据流，下载的类型，请求content-type 要设置为 application/vnd.ms-excel（二进制流数据），即我们需要的excel格式，更多格式请看这里

 getAttachmentByName (row) {
      let fileName = row.fullName;
      let filePath = row.fullPath;
      API.getAttachmentByNameList(fileName,fullPath).then((res) => {
        let params = {
          data: res.data,
          fileName: fileName,
          type: 'application/vnd.ms-excel'
        };
        dataToFile(params);
      });
    },

4.拓展，在http请求中，一般接口相应得是200，数据类型还都是json格式，这个数据类型返回的是'ArrayBuffer'，这时候需要去判断数据类型，从而去根据类型不去抛出错误 ，不去提示。

这里用到了对象原型链判断方法。不推荐使用 typeof 和 instanceof 去判断数据类型。如果数据类型是‘ArrayBuffer’，那么直接返回数据即可，不去抛出错误即可。

axios.interceptors.response.use(
  res => {
    let json = res.data;
    if (Object.prototype.toString.call(json) === '[object ArrayBuffer]') {
      return res;
    }  //判断是否是ArrayBuffer数据类型
 
    if (json && json.status !== '200' && json.status !== '10004') {
      APP.$message({
        message: json.err,
        type: 'error'
      });
    }
    return res;
  },
  error => {
    APP.$message({
      message: '请求异常',
      type: 'error'
    });
    return Promise.reject(error);
  }
);

原文链接

附上面的blob格式表

拓展名	文件类型	MIME类型
.aac	AAC 音频	audio/aac
.abw	AbiWord 文档	application/x-abiword
.arc	存档文档(多个文件嵌入)	application/x-freearc
.avi	AVI: 音频视频交错	video/x-msvideo
.azw	亚马逊Kindle电子书格式	application/vnd.amazon.ebook
.bin	任何类型的二进制数据	application/octet-stream
.bmp	Windows OS/2位图图形	image/bmp
.bz	BZip 存档	application/x-bzip
.bz2	BZip2 存档	application/x-bzip2
.csh	C-Shell 脚本	application/x-csh
.css	CSS	text/css
.csv	CSV	text/csv
.doc	Microsoft Word	application/msword
.docx	Microsoft Word (OpenXML)	application/vnd.openxmlformats-officedocument.wordprocessingml.document
.eot	MS嵌入式OpenType字体	application/vnd.ms-fontobject
.epub	电子出版物(EPUB)	application/epub+zip
.gif	GIF	image/gif
.htm	超文本标记语言 (HTML)	text/html
.html	超文本标记语言 (HTML)	text/html
.ico	Icon 格式	image/vnd.microsoft.icon
.ics	iCalendar 格式	text/calendar
.jar	Java Archive (JAR)	application/java-archive
.jpeg	JPEG 图片	image/jpeg
.jpg	JPEG 图片	image/jpeg
.js	JavaScript	text/javascript
.json	JSON 格式	application/json
.jsonld	JSON-LD 格式	application/ld+json
.mid	乐器数字接口(MIDI)	audio/midi audio/x-midi
.midi	乐器数字接口(MIDI)	audio/midi audio/x-midi
.mjs	JavaScript 模块	text/javascript
.mp3	MP3 音频	audio/mpeg
.mpeg	MPEG 视频	video/mpeg
.mpkg	苹果安装程序包	application/vnd.apple.installer+xml
.odp	OpenDocument演示文档	application/vnd.oasis.opendocument.presentation
.ods	OpenDocument 电子表格文件	application/vnd.oasis.opendocument.spreadsheet
.odt	OpenDocument 文本文档	application/vnd.oasis.opendocument.text
.oga	OGG 音频	audio/ogg
.ogv	OGG 视频	video/ogg
.ogx	OGG	application/ogg
.otf	OpenType 字体	font/otf
.png	便携式网络图形（PNG）	image/png
.pdf	PDF	application/pdf
.ppt	Microsoft PowerPoint	application/vnd.ms-powerpoint
.pptx	Microsoft PowerPoint (OpenXML)	application/vnd.openxmlformats-officedocument.presentationml.presentation
.rar	RAR 存档	application/x-rar-compressed
.rtf	富文本格式 (RTF)	application/rtf
.sh	Bourne shell 脚本	application/x-sh
.svg	可缩放矢量图形 (SVG)	image/svg+xml
.swf	小型web格式 (SWF) or Adobe Flash document	application/x-shockwave-flash
.tar	Tape 归档(TAR)	application/x-tar
.tif	标记图像文件格式 (TIFF)	image/tiff
.tiff	Tagged Image File Format (TIFF)	image/tiff
.ttf	TrueType 字体	font/ttf
.txt	Text	text/plain
.vsd	Microsoft Visio	application/vnd.visio
.wav	波形音频格式	audio/wav
.weba	WEBM 音频	audio/webm
.webm	WEBM 视频	video/webm
.webp	WEBP 图片	image/webp
.woff	网页开放字体格式 (WOFF)	font/woff
.woff2	网页开放字体格式 (WOFF)	font/woff2
.xhtml	XHTML	application/xhtml+xml
.xls	Microsoft Excel	application/vnd.ms-excel
.xlsx	Microsoft Excel (OpenXML)	application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.xml	XML	application/xml（普通用户不可读）、text/xml（普通用户可读）
.xul	XUL	application/vnd.mozilla.xul+xml
.zip	ZIP	application/zip
.3gp	3GPP audio/video 容器	video/3gpp、audio/3gpp（不含视频）
.3g2	3GPP2 audio/video 容器	video/3gpp2、audio/3gpp2（不含视频）
.7z	7-zip	application/x-7z-compressed

原文链接