vue Excel導出功能-前端處理后台返回數據流

 

產品數據大屏展示項目（下圖），因需要導出部分客戶信息的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