Vue+element项目实现列表数据导出excel文件

最新推荐文章于 2025-05-16 14:02:26 发布

宁顾取。

最新推荐文章于 2025-05-16 14:02:26 发布

阅读量1k

点赞数 9

分类专栏：前端一小步文章标签： excel vue elementui ruoyi 前端

本文链接：https://blog.youkuaiyun.com/weixin_54446335/article/details/140437194

版权

描述：

点击【导出】按钮，导出当前列表查询出来的所有数据到excel表格

功能实现：

1.导入xlsx库

将整个xlsx库导入到当前的JavaScript文件中，并将其重命名为XLSX。这样，就可以使用XLSX这个变量来访问库中的所有功能和模块了

import * as XLSX from 'xlsx';

2.在【导出】按钮上绑定点击事件

<el-button type="primary" @click="exportToExcel()">导出</el-button>

3.导出当前查询到的数据到excel表格

        // 点击【导出】按钮，导出当前列表查询出来的所有数据到excel表格
        exportToExcel() {
            const data = this.tableData;
            const fileName = "exported_data.xlsx";

            const worksheet = XLSX.utils.json_to_sheet(data);
            const work