vue导出Excel——处理返回的数据流

1. 先把接口调通，请求成功后会发现返回的是表格流文件格式的乱码（可以使用 Blob 对象指定要读取的文件或数据，然后创建a标签下载。）

2. 新建exportExcel.js(封装成公共方法)，文件内容如下：

注：这里需要用到 axios，需要把 responseType 请求类型变成 blob （Blob 对象表示一个不可变、原始数据的类文件对象（File 接口都是基于Blob））

import request from 'axios'
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.setAttribute('download', apis[this.activeName - 0].name + '.xlsx')
    link.download = data.fileName //下载的文件名
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }).catch(error => {
    console.log(error)
  })
}

3. 在需要导出的页面引入此文件:

import { exportMethod } from '@/utils/exportExcel'

4. 使用该方法实现导出功能：

注：post请求需把params改成data对象

exportInfo() { //点击事件
    const myObj = {
        method: 'get',
        url: getServer() + '/course/courseReport/downLoadExcel/memberStatistics',
        //get请求，如需参数可以直接把参数拼在url后（注意：拼接参数要在url后加‘?’）
        fileName: '统计'  //导出的文件名
    }
    exportMethod(myObj)
},

5. 点击导出 ，成功导出！

OK，就这样，End~