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