vue2下载excel表格数据

郭浪 Lv3
  2024-03-12 22:18:42 2024-03-12 22:18:42 创建   2024-03-12 22:18:42 2024-03-12 22:18:42 更新      

1、调用导出数据的api接口：因为返回的数据是二进制流，使用 responseType:’blob’

1
2
3
4
5
6
export function getExportTemplate() {
  return request({
    url: '/sys/user/import/template',
    responseType: 'blob' // 二进制文件流
  })
}

2、直接掉接口会直接显示报错，在这设置一下响应拦截器

1
2
3
if(response.data instanceof Blob) {
    rteurn response.data
}

3、安装file-saver

pnpm i file-saver 或者 npm i file-saver （可点击进入官网）

4、点击按钮调用接口，使用 file-saver 将 blob 转化成文件下载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<el-button size="mini" @click="exportEmployee">excel导出</el-button>
import FileSaver from 'file-saver'
import {
    exportEmployee
} from '@/api/employee'
export default {
    name: 'Employee',
    // ...
    methods: {
        // ...
        async exportEmployee() {
            const result = await exportEmployee()
            // FileSaver.saveAs(blob对象, 文件名称)
            FileSaver.saveAs(result, '员工信息表.xlsx')
        }
    }
}
  • 标题: vue2下载excel表格数据
  • 作者: 郭浪
  • 创建于 : 2024-03-12 22:18:42
  • 更新于 : 2024-03-12 22:18:42
  • 链接: https://guolang.top/2024/03/12/vue2下载excel表格数据/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
目录
vue2下载excel表格数据