Vue不能下載xls以及文件亂碼問題解決

更新時間：2022年04月18日 15:39:55 作者：Shang

最近工作中遇到了一些問題,通過查找相關(guān)資料終于找到了相關(guān)的解決方法,這篇文章主要給大家介紹了關(guān)于Vue不能下載xls以及文件亂碼問題解決的相關(guān)資料,需要的朋友可以參考下

發(fā)現(xiàn)問題

老大要讓我實現(xiàn)下載xls文件的功能，我想了想：我好像不太會耶！

但是我們之前寫的一個頁面有一個下載xls的功能，那我就CV大法，嘿嘿嘿。

當(dāng)我點擊下載按鈕的那一刻，控制臺紅了...，心想MMP

一樣的代碼不行，那個就能下載，我CV后變質(zhì)了？

報錯原因：TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.

我看了看網(wǎng)絡(luò)請求，老大說傳過來的數(shù)據(jù)沒問題，可能是數(shù)據(jù)太大？

我看了好多好多好多好多博客，他們解決方案是對傳過來的數(shù)據(jù)進行Blob處理后，那咱們試一試吧！

let blob = new Blob([res], {type: 'application/vnd.ms-excel'})
const url = window.URL.createObjectURL(res)

唉？可以下載了！但是表格內(nèi)的數(shù)據(jù)都是亂碼......

我這一想不行呀！都來看到某位掘友的博客，他的做法是在請求頭加responseType: 'blob'

最終我成功的解決了這個問題，嗚嗚嗚...

總結(jié)

在做大數(shù)據(jù)文件下載時，在請求頭中加入 responseType: 'blob'，就可以解決下載和文件內(nèi)亂碼的問題了。

下面附上代碼

// 文件下載 ——  <a> 標(biāo)簽方法下載
download(row.logUserId).then(res => {
  if (!res) {return}
	
  // 這里的blob處理可做可不做，我試了下，不做blob也可以下載且不亂碼
  let blob = new Blob([res], {type: 'application/vnd.ms-excel'})

  const url = window.URL.createObjectURL(blob)
  const link = document.createElement('a')

  link.style.display = 'none'
  link.href = url

  // download 屬性定義了下載鏈接的地址而不是跳轉(zhuǎn)路徑
  link.setAttribute('download', row.reportExcelLog.fileName+'.xls')
  document.body.appendChild(link)

  link.click()

  window.URL.revokeObjectURL(link.href) //釋放url
  document.body.removeChild(link)//釋放標(biāo)簽
})

// 請求
export function download(logUserId) {
  return request({
    url: prefix + '/download/by/log/user/id',
    method: 'post',
    data: {
      logUserId
    },
    // 這一步至關(guān)重要
    responseType: 'blob'
  })
}

到此這篇關(guān)于Vue不能下載xls以及文件亂碼問題解決的文章就介紹到這了,更多相關(guān)Vue下載xls及文件亂碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: