vue导出xlsx表格文件-简单粗暴

因为考虑到复用，所以简单封装了一下，需要的直接copy就行了

注意-后端返回的数据必须是execel的文件流！

1.创建exportExcel.js文件

2.创建函数名称以及返回值

export const exportExcel = (res) => {
}

3.处理文件名称

let fileName
  if (res.headers) {
    //处理文件名
    const contentDisposition = res.headers[content-disposition]
    if (contentDisposition) {
      fileName = window.decodeURI(
        res.headers[content-disposition].split(=)[1]
      )
    }
  } else {
    Message({
      message: 无文件名,
      type: error,
    })
  }

接口的hearders需带有content-disposition字段，这个和后端对接好。

4.处理返回的文件流以及处理导出

//这个响应值对应自己的
if (res.data.data) {
    //处理文件流
    let blob = new Blob([res.data.data], {
      type: application/vnd.ms-excel,
    })
    let url = window.URL.createObjectURL(blob)
    const link = document.createElement(a) // 创建a标签
    link.href = url
    link.download = fileName
    link.click()
    URL.revokeObjectURL(url)
  } else {
    Message({
      message: 导出失败,
      type: error,
    })
  }

5.在对应的页面导入文件以及调用

import { exportExcel } from @/plugin/exportExcel.js

// 调文件导出方法
exportExcel(res)

这样就可以成功的导出文件啦！

下面贴一下完整的js代码

// 统一处理文件导出
export const exportExcel = (res) => {
  let fileName
  if (res.headers) {
    //处理文件名
    const contentDisposition = res.headers[content-disposition]
    if (contentDisposition) {
      fileName = window.decodeURI(
        res.headers[content-disposition].split(=)[1]
      )
    }
  } else {
    Message({
      message: 无文件名,
      type: error,
    })
  }
  if (res.data.data) {
    //处理文件流
    let blob = new Blob([res.data.data], {
      type: application/vnd.ms-excel,
    })
    let url = window.URL.createObjectURL(blob)
    const link = document.createElement(a) // 创建a标签
    link.href = url
    link.download = fileName
    link.click()
    URL.revokeObjectURL(url)
  } else {
    Message({
      message: 导出失败,
      type: error,
    })
  }
}

有疑问的私聊我即可