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)
  })