產品資料大屏展示專案（下圖），因需要匯出部分客戶資訊的excel表，資料表由後臺實現，前端負責匯出，

現說下處理過程：

1，首先把介面調通，請求成功後返回表格流檔案格式的一堆亂碼，如下；可以使用 Blob 物件指定要讀取的檔案或資料，然後建立a標籤下載。

2，因需要匯出的列表較多，因此封裝成公共方法寫在 util.js 裡

這裡注意用到 axios，需要把responseType 請求型別變成 blob (Blob 物件表示一個不可變、原始資料的類檔案物件（File 介面都是基於Blob）)

// 匯出Excel公用方法
export function exportMethod (data) {
  
 
return request({
    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 //下載的檔名
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }).catch(error => {
    this.$message.error({
      title: 
 
'錯誤',
      desc: '網路連線錯誤'
    })
    console.log(error)
  })
}

3, 在需要匯出的頁面引入此方法:

import { exportMethod } from '@/util/util'

4,methods中使用匯出：

get請求直接把引數拼在url後，上面方法裡已經寫到：如有params則？後面拼接引數，否則是 ' ' （data.params ? '?' + data.params : ''）

注意 post請求需把params改成data物件

 // 匯出新增電路
    exportNew () {
      let myObj = {
        method: 'get',
        url: '/report-vpn/console/exportTeardownCustomer',
        fileName: '上月新裝客戶列表',
        params: `productName=${this.productName}`
      }
      exportMethod(myObj)
    },
    // 匯出拆機電路
    exportTer () {
      let myObj = {
        method: 'get',
        url: '/report-vpn/console/exportTeardownCustomer',
        fileName: '上月拆機戶列表',
        params: `productName=${this.productName}`
      }
      exportMethod(myObj)
    },

5，然後點選按鈕成功彈出下載框

開啟檔案，OK