After the vue2 file stream is successfully downloaded, the file format is incorrect, cannot be opened, and the content is missing.

Project scenario

The back-end uses file streaming to send file information to the front-end. The front-end needs to receive the corresponding stream information and perform corresponding operations. For example, if it receives pictures or PDFs, it will enter preview mode, and if it receives compressed packages, it will download the files. The backend transmits the corresponding files through different transmission methods, and the frontend needs to receive the corresponding information and perform operations.

Problem Description

When receiving pictures and PDFs, you can operate normally. When receiving compressed file streams, you can download them normally. However, after downloading, the downloaded files are damaged.

Cause Analysis

Because the files are different, the receiving methods are also different. Ordinary pictures and PDFs can be requested using the daily request method, while requests for compressed packages need to add the received data format responseType: blob, and the default responseType is "".

solution

1. Solution to pictures

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

2. Solution to file stream

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

3. File download

/**
 * 下载压缩包文件
 * @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. File format when downloading Blob

file format	typetype
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
.web	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