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啦，這樣就可以的啦^_^