vue解析blob響應(yīng)二進(jìn)制文件流下載

import axios from 'axios'
import { getToken } from '@/utils/auth'

const mimeMap = {
  zip: 'application/zip',
  pdf: 'application/pdf',
  png: 'application/png',
  jpg: 'image/jpeg',
  jpeg: 'image/jpeg',
  xls: 'application/vnd.ms-excel',
  xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  csv: 'application/csv',
  doc: 'application/msword',
  docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
  bmp: 'image/bmp',
  gif: 'image/gif',
}

const baseUrl = process.env.VUE_APP_BASE_API
export function downLoadBlob(str, type,filename) {
  var url = baseUrl + str
  axios({
    method: 'get',
    url: url,
    responseType: 'blob',
    headers: { 'Authorization': 'Bearer ' + getToken() }
  }).then(res => {
    let mimeType;
    if(type == 'zip'){
      mimeType = mimeMap.zip
    }else if(type == 'pdf'){
      mimeType = mimeMap.pdf
    }else if(type == 'png'){
      mimeType = mimeMap.png
    }else if(type == 'jpg'){
      mimeType = mimeMap.jpg
    }else if(type == 'jpeg'){
      mimeType = mimeMap.jpeg
    }else if(type == 'xls'){
      mimeType = mimeMap.xls
    }else if(type == 'xlsx'){
      mimeType = mimeMap.xlsx
    }else if(type == 'csv'){
      mimeType = mimeMap.csv
    }else if(type == 'doc'){
      mimeType = mimeMap.doc
    }else if(type == 'docx'){
      mimeType = mimeMap.docx
    }else if(type == 'bmp'){
      mimeType = mimeMap.bmp
    }else if(type == 'gif'){
      mimeType = mimeMap.gif
    }
    resolveBlob(res, mimeType, filename)

  })
}
/**
 * 解析blob響應(yīng)內(nèi)容并下載
 * @param {*} res blob響應(yīng)內(nèi)容
 * @param {String} mimeType MIME類型
 */
export function resolveBlob(res, mimeType,filename) {
  const aLink = document.createElement('a')
  var blob = new Blob([res.data], { type: mimeType })
  // 視情況而定
  // 1.從response的headers中獲取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 設(shè)置的文件名;
  // var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
  // var contentDisposition = decodeURI(res.headers['content-disposition'])
  // var result = patt.exec(contentDisposition)
  // var fileName = result[1]
  // fileName = fileName.replace(/\"/g, '')
  aLink.href = URL.createObjectURL(blob)
  // 2.直接使用自定義文件名
  aLink.setAttribute('download', filename) // 設(shè)置下載文件名稱
  document.body.appendChild(aLink)
  aLink.click()
  document.body.removeChild(aLink);
}

import { downLoadBlob} from "../../../utils/xxxx";
//點(diǎn)擊確認(rèn)下載
handleDownload(row) {
      // console.log("下載", row);
      downLoadBlob(
        "/xxx/xxx/xxx?id=" + row.id,
        row.fileType,
        row.fileName
      );
    },
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容