vue使用blob下載文件遇到的問題小結

更新時間：2024年02月22日 11:23:45 作者：不悔0.0

Blob?對象表示一個不可變、原始數(shù)據(jù)的類文件對象，這篇文章主要介紹了vue使用blob下載文件遇到的問題記錄,需要的朋友可以參考下

Blob 對象表示一個不可變、原始數(shù)據(jù)的類文件對象。它的數(shù)據(jù)可以按文本或二進制的格式進行讀取。

在項目中遇到需求，需要將后端返回的二進制流下載成 excel 表格形式，首先，先寫一個方法用來下載

export function fileDownload(res) {
  let blob = new Blob([res.data], {
    type: res.data.type,
  })
  let downloadElement = document.createElement('a')
  let href = window.URL.createObjectURL(blob) //創(chuàng)建下載鏈接
  let fileName = res.headers['content-disposition']
    ? res.headers['content-disposition'].split('attachment;filename=')[1]
    : new Date().getTime()
  downloadElement.href = href
  // window.open(downloadElement.href)
  downloadElement.download = decodeURIComponent(fileName) //解碼
  document.body.appendChild(downloadElement)
  downloadElement.click()
  document.body.removeChild(downloadElement)
  window.URL.revokeObjectURL(href) //釋放掉blob對象
}

當然，也可以使用自定義的文件名，自己傳遞一個文件名即可

export function downloadFile(res, fileName) {
  const blob = new Blob([res.data], { type: res.data.type })
  let dom = document.createElement('a')
  let url = window.URL.createObjectURL(blob)
  dom.href = url
  dom.download = decodeURI(fileName)
  dom.style.display = 'none'
  document.body.appendChild(dom)
  dom.click()
  dom.parentNode.removeChild(dom)
  window.URL.revokeObjectURL(url)
}

需要注意的是，要記得在下載接口的地方加上 responseType: 'blob',

切記，一定要加上 responseType: 'blob', 否則下載的會亂碼甚至讀取不出來

加上之后，在需要使用的地方使用即可

async handleSubmit() {
      if (this.form.pushDepartment.length === 0) {
        this.$message.warning(`推送部門不能為空`)
        return false
      }
      // 導出excel表格
      let params = {
        healthCodeAlarmIds: [],
        sendDepartment: [],
      }
      this.selectData.forEach((item) => {
        let id = parseInt(item.id)
        params.healthCodeAlarmIds.push(id)
      })
      params.sendDepartment = this.form.pushDepartment
      let res = await exportInfo({ ...params })
      // console.log('res', res)
      fileDownload(res)
      // downloadFile(res, 'yj.xlsx')
    },

到此這篇關于vue使用blob下載文件遇到的問題的文章就介紹到這了,更多相關vue blob下載文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: