vue2文件流下載成功后文件格式錯誤、打不開及內容缺失如何解決

這篇文章主要介紹了vue2文件流下載成功后文件格式錯誤、打不開及內容缺失如何解決的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇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下載時的文件格式

關于“vue2文件流下載成功后文件格式錯誤、打不開及內容缺失如何解決”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“vue2文件流下載成功后文件格式錯誤、打不開及內容缺失如何解決”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。