vue2文件流下载成功后文件格式错误、打不开及内容缺失如何解决

项目场景

后端采用文件流的方式将文件信息发送给前端，前端需要接收相应的流信息做出对应的操作，如接收到图片、pdf将进行预览模式，将接收到压缩包形式的则进行文件下载。后端对相应的文件进行不同的传输方式进行传输，前端则需要接收相应的信息并进行操作。

问题描述

当收到图片、pdf则可以正常的进行操作，当接收到压缩包文件流时候可以正常下载，但是下载后，下载的文件损坏了。

原因分析

由于文件不同，所以接收方式也是有区别的，普通的图片、pdf可以采用日常的请求方式去请求，而压缩包的请求需要加上接收数据格式responseType:为blob，默认的responseType为""。

解决方案

1、图片的解决方式

export const getFileImg = row => {
    return request({
        url: '/api/blade-resource/oss/endpoint/get-file-secret',	//请求路径
        method: 'get',	//请求模式
        params: row,	//请求参数
    })
}

2、文件流的解决方式

export const getFileZip = row => {
    return request({
        url: '/api/blade-resource/oss/endpoint/get-file-secret',	//请求路径
        method: 'get',	//请求模式
        params: row,	//请求参数
        responseType: 'blob',
    })
}

3、文件下载

/**
 * 下载压缩包文件
 * @param {blob} fileArrayBuffer 文件流
 * @param {String} filename 文件名称
 * @param {String} fileType 文件格式
 */
export const downloadZip = (fileArrayBuffer, filename, fileType) => {
  let data = new Blob([fileArrayBuffer], { type: fileType == 'zip' ? 'application/zip,charset=utf-8' : 'application/x-rar-compressed,charset=utf-8' });
  if (typeof window.chrome !== 'undefined') {
    // Chrome
    var link = document.createElement('a');
    link.href = window.URL.createObjectURL(data);
    link.download = filename;
    link.click();
    console.log(data);
  } else if (typeof window.navigator.msSaveBlob !== 'undefined') {
    // IE
    var blob = new Blob([data], { type: fileType == 'zip' ? 'application/zip' : 'application/x-rar-compressed' });
    window.navigator.msSaveBlob(blob, filename);
  } else {
    // Firefox
    var file = new File([data], filename, { type: fileType == 'zip' ? 'application/zip' : 'application/x-rar-compressed' });
    window.open(URL.createObjectURL(file));
  }
}

4、Blob下载时的文件格式

文件格式	type类型
aac	audio/aac
.abw	application/x-abiword
.avi	video/x-msvideo
.azw	application/vnd.amazon.ebook
.bin	application/octet-stream
.bmp	image/bmp
.bz	application/x-bzip
.bz2	application/x-bzip2
.csh	application/x-csh
.css	text/css
.csv	text/csv
.doc	application/msword
.docx	application/vnd.openxmlformats-officedocument.wordprocessingml.document
.eot	application/vnd.ms-fontobject
.epub	application/epub+zip
.gif	image/gif
.htm/.html	text/html
.ico	image/vnd.microsoft.icon
.ics	text/calendar
.jar	application/java-archive
.jpeg/.jpg	image/jpeg
.js	text/javascript
.json	application/json
.jsonld	application/ld+json
.mid/.midi	audio/midi audio/x-midi
.mjs	text/javascript
.mp3	audio/mpeg
.mpeg	video/mpeg
.mpkg	application/vnd.apple.installer+xml
.odp	application/vnd.oasis.opendocument.presentation
.ods	application/vnd.oasis.opendocument.spreadsheet
.odt	application/vnd.oasis.opendocument.text
.oga	audio/ogg
.ogv	video/ogg
.ogx	application/ogg
.otf	font/otf
.png	image/png
.pdf	application/pdf
.ppt	application/vnd.ms-powerpoint
.pptx	application/vnd.openxmlformats-officedocument.presentationml.presentation
.rar	application/x-rar-compressed
.rtf	application/rtf
.svg	image/svg+xml
.swf	application/x-shockwave-flash
.tar	application/x-tar
.tif/.tiff	image/tiff
.ttf	font/ttf
.txt	text/plain
.vsd	application/vnd.visio
.wav	audio/wav
.weba	audio/webm
.webm	video/webm
.webp	image/webp
.woff	font/woff
.woff2	font/woff2
.xhtml	application/xhtml+xml
.xls	application/vnd.ms-excel
.xlsx	application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.xml	application/xml 代码对普通用户来说不可读 (RFC 3023, section 3)text/xml 代码对普通用户来说可读 (RFC 3023, section 3)
.xul	application/vnd.mozilla.xul+xml
.zip	application/zip
.3gp	video/3gpp audio/3gpp（若不含视频）
.3g2	video/3gpp2 audio/3gpp2（若不含视频）
.7z	application/x-7z-compressed