当前位置：首页 > news >正文

Vue3：将表格数据下载为excel文件

news 2025/8/25 12:27:21

需求

将表格数据或者其他形式的数据下载为excel文件

技术栈

Vue3、ElementPlus、

实现

1、安装相关的库

下载xlsx 和 file-saver 库

npm install -S file-saver
npm install -S xlsx

引入XLSX库和FileSaver库

import XLSX from 'xlsx';
import FileSaver from 'file-saver';

2、添加导出按钮

需要一个“导出”按钮，并给它绑定一个点击事件
（1）点击该按钮可以将表格的数据下载为excel文件；
（2）关于按钮的图标可以引用elementplus里的下载图标
另外，可以添加触发提示，告知用户可以进行数据下载
关于触发提示可以引用elementplus里面的el-tooltip组件
大致效果如下：
导出按钮、触发提示、表格的包含关系如下：
相关代码:

<!-- 表格 -->
<div class="TopCourse"><div class="navTop"><!-- 触发提示 --><el-tooltipclass="box-item"effect="dark"content="下载全部数据"placement="top-start"><!-- 下载按钮 --><el-button type="primary" :icon="Download" @click="userExport" /></el-tooltip></div><!-- 表格 --><el-tableid="myTable":data="tableData"style="width: 95%":header-cell-style="{ 'text-align': 'center' }":cell-style="{ 'text-align': 'center' }"><el-table-column prop="index" label="No." /><el-table-column prop="ID" label="ID" /></el-table>
</div>

3、函数：将数据下载为excel文件

使用 SheetJS 库将表格数据转换为 Excel 文件格式;
使用 file-saver 库将生成的 Excel 文件保存到本地

// tableDataAllL:指excel数据的全部汇总（根据实际情况自己去补充）
var tableDataAll = [];
// 将数据下载为excel文件
function userExport() {const worksheet = XLSX.utils.json_to_sheet(tableDataAll);const workbook = XLSX.utils.book_new();XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");const excelBuffer = XLSX.write(workbook, {bookType: "xlsx",type: "array",});const blob = new Blob([excelBuffer], {type: "application/vnd.ms-excel",});FileSaver.saveAs(blob, "tableDataAll"); // 下载文件 文件名
}