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') {// Chromevar 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') {// IEvar blob = new Blob([data], { type: fileType == 'zip' ? 'application/zip' : 'application/x-rar-compressed' });window.navigator.msSaveBlob(blob, filename);} else {// Firefoxvar file = new File([data], filename, { type: fileType == 'zip' ? 'application/zip' : 'application/x-rar-compressed' });window.open(URL.createObjectURL(file));}}

4、Blob下载时的文件格式