// 一般的下載我們如果直接請求的話，那麼我們得到的東西基本就是亂碼的。遇到這種情況我們會想到用a標籤或者iframe。但是這樣的下載也會有一個無法避免的地方，就是無法監聽是否下載完成。
// 首先我們先把axios封裝起來
import Axios form 'axios';

/*
 * @params {string} url 請求地址
 * @params {object} resOpts 請求配置引數
 */
const download = (url, resOpts = {}) => {
  const { type = 'get', data = '' } = resOpts
  const queryArgs 
 
= {
    url,
    method: type,
    data,
    responseType：'bolb' // 這個一定要寫，不然下載的東西會亂碼
  }
  // tips: 這裡直接返回的是response整體!
  return Axios.request(queryArgs).catch(err => console.log(err))
}

// 這個方法是我借鑑的其他人的 我自己修改了一部分
convertRes2Blob = (response) =>{
  // 提取檔名（這個我提取不出來獲取不到）
  // const fileName = response.headers['content-disposition'].match(
    
 
// filename=(.*)
  // )[1]
  // 將二進位制流轉為blob // 關於bolb 可以參考：https://developer.mozilla.org/zh-CN/docs/Web/API/Blob
  const blob = new Blob([response.data], { type: 'application/octet-stream' })
  if (typeof window.navigator.msSaveBlob !== 'undefined') {
    // 相容IE，window.navigator.msSaveBlob：以本地方式儲存檔案
    window.navigator.msSaveBlob(blob, decodeURI(filename))
  } 
 
else {
    // 建立新的URL並指向File物件或者Blob物件的地址
    const blobURL = window.URL.createObjectURL(blob)
    // 建立a標籤，用於跳轉至下載連結
    const tempLink = document.createElement('a')
    tempLink.style.display = 'none'
    tempLink.href = blobURL
    tempLink.setAttribute('download', decodeURI(filename))
    // 相容：某些瀏覽器不支援HTML5的download屬性
    if (typeof tempLink.download === 'undefined') {
      tempLink.setAttribute('target', '_blank')
    }
    // 掛載a標籤
    document.body.appendChild(tempLink)
    tempLink.click()
    document.body.removeChild(tempLink)
    // 釋放blob URL地址
    window.URL.revokeObjectURL(blobURL)
  }
}

ps:原文連結：https://zhuanlan.zhihu.com/p/77672133。