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

这里写目录标题

项目场景

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

问题描述

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

原因分析

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

解决方案

1、图片的解决方式

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

2、文件流的解决方式

exportconstgetFileZip=row=>{returnrequest({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 文件格式
 */exportconstdownloadZip=(fileArrayBuffer, filename, fileType)=>{let data =newBlob([fileArrayBuffer],{type: fileType =='zip'?'application/zip,charset=utf-8':'application/x-rar-compressed,charset=utf-8'});if(typeof window.chrome !=='undefined'){// Chromevar link = document.createElement('a');
    link.href = window.URL.createObjectURL(data);
    link.download = filename;
    link.click();
    console.log(data);}elseif(typeof window.navigator.msSaveBlob !=='undefined'){// IEvar blob =newBlob([data],{type: fileType =='zip'?'application/zip':'application/x-rar-compressed'});
    window.navigator.msSaveBlob(blob, filename);}else{// Firefoxvar file =newFile([data], filename,{type: fileType =='zip'?'application/zip':'application/x-rar-compressed'});
    window.open(URL.createObjectURL(file));}}

4、Blob下载时的文件格式
文件格式type类型aacaudio/aac.abwapplication/x-abiword.avivideo/x-msvideo.azwapplication/vnd.amazon.ebook.binapplication/octet-stream.bmpimage/bmp.bzapplication/x-bzip.bz2application/x-bzip2.cshapplication/x-csh.csstext/css.csvtext/csv.docapplication/msword.docxapplication/vnd.openxmlformats-officedocument.wordprocessingml.document.eotapplication/vnd.ms-fontobject.epubapplication/epub+zip.gifimage/gif.htm/.htmltext/html.icoimage/vnd.microsoft.icon.icstext/calendar.jarapplication/java-archive.jpeg/.jpgimage/jpeg.jstext/javascript.jsonapplication/json.jsonldapplication/ld+json.mid/.midiaudio/midi audio/x-midi.mjstext/javascript.mp3audio/mpeg.mpegvideo/mpeg.mpkgapplication/vnd.apple.installer+xml.odpapplication/vnd.oasis.opendocument.presentation.odsapplication/vnd.oasis.opendocument.spreadsheet.odtapplication/vnd.oasis.opendocument.text.ogaaudio/ogg.ogvvideo/ogg.ogxapplication/ogg.otffont/otf.pngimage/png.pdfapplication/pdf.pptapplication/vnd.ms-powerpoint.pptxapplication/vnd.openxmlformats-officedocument.presentationml.presentation.rarapplication/x-rar-compressed.rtfapplication/rtf.svgimage/svg+xml.swfapplication/x-shockwave-flash.tarapplication/x-tar.tif/.tiffimage/tiff.ttffont/ttf.txttext/plain.vsdapplication/vnd.visio.wavaudio/wav.webaaudio/webm.webmvideo/webm.webpimage/webp.wofffont/woff.woff2font/woff2.xhtmlapplication/xhtml+xml.xlsapplication/vnd.ms-excel.xlsxapplication/vnd.openxmlformats-officedocument.spreadsheetml.sheet.xmlapplication/xml 代码对普通用户来说不可读 (RFC 3023, section 3)text/xml 代码对普通用户来说可读 (RFC 3023, section 3).xulapplication/vnd.mozilla.xul+xml.zipapplication/zip.3gpvideo/3gpp audio/3gpp（若不含视频）.3g2video/3gpp2 audio/3gpp2（若不含视频）.7zapplication/x-7z-compressed