vue中后端做Excel导出功能返回数据流前端如何做处理

点击 导出Excel 调用导出接口成功了：但是后台返回的数据流是一堆乱码：

 

 

接下来要处理这堆乱码，因为用到的地方多，所以在main.js文件里封装了一个公共方法并抛出：

虽然vue里有封装好的请求接口的方法，但这里要单独用axios，所以先在util.js里引入axios

import axios from 'axios'

// 导出Excel公用方法
export function exportMethod(data) {
  axios({
      method: data.method,
      url: `${data.url}${data.params ? '?' + data.params : ''}`,
      responseType: 'blob'
  }).then((res) => {
      const link = document.createElement('a')
      let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})
      link.style.display = 'none'
      link.href = URL.createObjectURL(blob)

      // link.download = res.headers['content-disposition'] //下载后文件名
      link.download = data.fileName+'.xlsx' //下载的文件名
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
  }).catch(error => {
      this.$Notice.error({
          title: '错误',
          desc: '网络连接错误'
      })
      console.log(error)
  })
}

在使用的页面中引入方法：

import { exportMethod } from '../../main'

在methods导出的方法里，调用共用导出方法。

注意：因为我们后台用的是get方法，所以传递get请求并且拼接要传的参数，如果是post请求，就把传递的get改成post，传递数据改成传data数据对象，params去掉，公共方法里把url上拼接的参数也去掉，直接 接收url路径即可，再接收一个data就行了

exportTable(){
                var url = this.$root.URL + '/export/room_user'
                let myObj = {
                    method: 'get',
                    url: url,
                    fileName: '居民表格',
                    params: `district_id=${this.district_id}&police_id=${this.police_id}&uptown_id=${this.uptown_id}`
                }
                exportMethod(myObj)
            },

ok啦，这样就可以的啦^_^