axios請求下載excel文件

前端通過發請求，下載文件

這里我們使用axios發送請求作講解

• 封裝公共的導出文件的方法，針對get請求

  /*
   * @{content} 后端返回的數據
   * @{customFileName} 自定義的文件名稱
   * @{type} 對應的MIME的類型 'application/vnd.ms-excel' 
   * 類型的詳情可查看MDN文檔 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
  */
  function exportFile (content, customFileName, type) {
      let blob = new Blob([content], {type: type || 'application/vnd.ms-excel'}) // 默認excel
      let filename = content.filename || customFileName
      let URL = window.URL || window.webkitURL
      let objectUrl = URL.createObjectURL(content)
      let a = document.createElement('a')
      a.href = objectUrl
      a.download = filename
      document.body.appendChild(a)
      a.click()
      a.remove()
  }
  

• get 請求

  // get 請求如何將響應頭中的文件名取出來, 在axios的相應攔截器中
  axios.interceptors.response.use(response => {
      let filename = response.headers['content-disposition'] && response.headers['content-disposition'].split(';')[1].split('filename=')[1]
      if (filename) {
          if (filename.indexOf('%') < 0) {
              filename = decodeURIComponent(escape(filename))
              response.data.filename = filename
          } else {
              filename = decodeURIComponent(filename)
              response.data.filename = filename
          }
      }
      return response.data
  })
  

  發送get請求並下載文件

  axios({
      url,
      method: 'get',
      params: {}, // 你需要向后端發送的數據
      responseType: 'blob', // 必須項，axios會將文件流轉為blob
  }).then(res => {
    // 因為后端傳回來的是文件流， 所以我們的響應頭中可能會有后端設置的文件的名字，這里可以查看瀏覽器network對應請求的響應頭， 'Content-Type': 'application/octet/stream;charset=ISO8859-1', 'Content-Disposition': attachment;filename=xxxxx', 這時候我們得到的就是一個被axios將文件流轉為blob的blob實例對象
      exportFile(res.data, '測試文件.xlsx') // 這是剛剛在上面封裝的公共的導出方法。
  })
  

• post 請求

  axios({
      url,
      method: 'POST',
      data: {},
      responseType: 'blob'
  }).then(res => {
     // 目前在我們的項目中，我通過這樣設置響應類型blob, 但是我接收到的還是一個字符串類型的亂碼東西。沒得關系，自己搞成blob
      if (Object.prototype.toString.call(res.data) === '[object String]') {
      	let len = res.data.length
          let buffer = new ArrayBuffer(len)
          let unitArrayBuffer = new Unit8Array(buffer)
          for (var i = 0; i < len; i++) {
              unitArrayBuffer[i] = String.prototype.charCodeAt.call(res.data, i)
          }
          let blob = new Blob([buffer], {type: 'applicaiton/vnd.ms-excel'})
          let fileName = '自定義的文件名.xlsx'
          exportFile(blob, fileName) // 在上面定義的公共的導出方法
      }
      
  })
  

• 將后端返回的json數據在前端轉為excel文件

  // 需要使用一個庫 xlsx   需要進行安裝， 可使用npm  npm i xlsx -S
  import XLSX from 'xlsx'
  axios({
      url,
      method: 'POST|GET',
  }).then(res => {
      // res.data =>  [{name: 'fwt', age: 12}, {name: 'fwt1', age: 14}, {name: 'fwt2', age: 18}]
      const fileName = '自定義的文件名.xlsx'
      let wsName = 'SheetJs'
      let wb = XLSX.utils.book_new()
      let ws = XLSX.utils.json_to_sheet(res.data)
      XLSX.utils.book_append_sheet(wb, ws, wsName)
      XLSX.writeFile(wb, fileName)
  })