vue前端调后台接口下载excel文件

后台提供下载接口，可传参数

使用get方法

• window.location.href = '/api/xxx/xxx?params'
  

• window.open('/api/xxx/xxx?params')
  

• <a href="/api/xxx/xxx?params" download="excel.xls">export</a>
  

get方法参数拼接

• // 拆分数据
  splitData: function (data) {
      let url = ''
      for (let k in data) {
          if (data.hasOwnProperty(k)) {
              let value = data[k] || ''
              url = url + '&' + k + '=' + encodeURIComponent(value)
          }
      }
      return url ? url.substring(1) : ''
  },
  
  // 拼接参数
  contractUrl: function (url, data) {
      return url + (url.indexOf('?') < 0 ? '?' : '&') + this.splitData(data)
  },
  

使用post方法

直接调用接口是返回表格流文件格式的，可以使用 Blob 对象指定要读取的文件或数据，然后创建a标签下载。

• /**
   *  导出excel文件
   * @param url 下载地址
   * @param data 下载参数
   * @param name 下载文件名
   */
  export const $export = (url, data, name) => {
      let opt = {
          url: url,
          method: 'post',
          responseType: 'blob',
          data: data
      }
      axios.request(opt).then(res => {
      	// Blob 对象表示一个不可变、原始数据的类文件对象（File 接口都是基于Blob）
          const BLOB = res.data
          // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容
          const fileReader = new FileReader()
          // 开始读取指定的Blob中的内容。读取完成result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容
          fileReader.readAsDataURL(BLOB)
          // 处理load事件，该事件在读取操作完成时触发
          fileReader.onload = (event) => {
              let a = document.createElement('a')
              a.download = `${name}.xls`
              a.href = event.target.result
              document.body.appendChild(a)
              a.click()
              document.body.removeChild(a)
          }
      })
  }
  

备注

异常问题1：Uncaught TypeError: Failed to execute ‘readAsDataURL’ on ‘FileReader’: parameter 1 is not of type ‘Blob’
问题分析：后台返回了数据流，点击下载后报异常无法下载，尝试将后台返回的数据流强制转换为blob类型发现能下载，但是转化后文件损坏无法打开

 const BLOB = new Blob([res.data], "application/vnd.ms-excel;charset=utf-8")

此时可以判断是数据的问题，项目中开启mock后会对原生的ajax请求的数据产生影响，可能导致文件流异常，因此生产环境禁用mock就解决问题了。

 // vue 项目中在main.js中增加判断，生产环境禁用mock
import Mock from '../mock'
if (process.env.NODE_ENV === 'development') {
  // Mock.init()
  // Mock.saleMockOpen();
}