Ajax 下載文件 文件被損壞

問題表現

Ajax 下載文件成功后，打開提示格式損壞，源代碼如下：

  axios({
    method: 'get',
    url: "/public/工作簿1.xlsx", // 靜態資源地址
  }).then(res => {
    const href = document.querySelector('.href')
    let blob = new Blob([res.data], { type: 'application/octet-stream'})
    href.href = URL.createObjectURL(blob)
    href.download = "xxx.xlsx"
    href.click()
  })

提示格式被損壞：

將 responseType 設置為 blob 或者 arraybuffer 即可：

  axios({
    method: 'get',
    url: "/public/工作簿1.xlsx", // 靜態資源地址
    responseType: 'blob'
  }).then(res => {
    const href = document.querySelector('.href')
    let blob = new Blob([res.data], { type: 'application/octet-stream'})
    href.href = URL.createObjectURL(blob)
    href.download = "xxx.xlsx"
    href.click()
  })

原因探索

responseType 的作用用於告訴瀏覽器，如何解析服務端返回的數據，需要保證客戶端所設置的 responseType，能夠解析服務端返回的內容類型( content-type)，否則會導致格式解析錯誤，先看 responseType 所支持的類型：

類型	說明
""	responseType 為空字符串時，采用默認類型 DOMString，與設置為 text 相同
"arraybuffer"	response 是一個包含二進制數據的 JavaScript ArrayBuffer
"blob"	response 是一個包含二進制數據的 Blob 對象
"document"	response 是一個 HTML Document 或 XML XMLDocument，這取決於接收到的數據的 MIME 類型。
"json"	response 是一個 JavaScript 對象。這個對象是通過將接收到的數據類型視為 JSON 解析得到的。
"text"	response 是一個以 DOMString(UTF-16字符串) 對象表示的文本

當后台返回的數據是二進制數據流時，我們必須指定客戶端也是以二進制流的方式去解析，否則無法獲取到期望的結果。在上面的例子中，我們未設置 responseType，所以默認的解析方式為 DOMString，導致數據不一致。