我们这里需要用到两个库:
FileSaver:
XLSX:
npm install file-saver xlsx
表格导出的主要代码
<el-button color="#4b5cc4" :icon="Download" @click="exportExcel">导出为Excel</el-button>
<!-- 表格 -->
<div class="table">
<el-table :data="productManagerInfo" border style="width: 100%" id="productTable">
<!-- 索引 -->
<el-table-column type="index" label="id" />
<el-table-column prop="account" label="账号" />
<el-table-column prop="name" label="姓名" />
<el-table-column prop="sex" label="性别" />
<el-table-column prop="department" label="部门" />
<el-table-column prop="identity" label="身份" />
<el-table-column prop="email" label="邮箱" />
<el-table-column label="操作" width="200">
<!-- 编辑 -->
<template #default="scope"> <!-- 作用域插槽 -->
<el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<!-- 删除 -->
<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
import * as FileSaver from "file-saver";
import * as XLSX from "xlsx";
// 导出表格按钮点击后触发的事件
const exportExcel = () => {
/* 从表生成工作簿对象 */
var wb = XLSX.utils.table_to_book(document.querySelector("#productTable"));
/* 获取二进制字符串作为输出 */
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
try {
// 使用 FileSaver 将二进制数据保存为文件
FileSaver.saveAs(
new Blob([wbout], { type: "application/octet-stream" }),
// 设置导出文件名称
"product.xlsx"
);
} catch (e) {
// 处理异常,例如在不支持 Blob 或 FileSaver 的情况下
if (typeof console !== "undefined") console.log(e, wbout);
}
// 返回二进制字符串(可选,根据实际需求)
return wbout;
}
讲解一下代码里面用到的api:
XLSX.utils.table_to_book
: 这个函数从一个HTML表格中生成一个工作簿对象(Workbook)。document.querySelector("#productTable")
选择了具有 id 为 productTable
的表格元素。
XLSX.write
: 这个函数将工作簿对象转换为二进制字符串。
bookType: "xlsx"
指定了导出的文件类型为 Excel 文件
type: "array"
表示输出的数据格式为数组。
FileSaver.saveAs
: 这里使用 FileSaver.js 库将二进制数据保存为文件。
Blob([wbout], { type: "application/octet-stream" })
创建一个 Blob 对象,表示二进制数据,并设置其 MIME 类型为 "application/octet-stream",这是一个通用的二进制文件类型. FileSaver.saveAs
函数将这个 Blob 对象保存为文件,其中第二个参数为文件名,这里设置为 "product.xlsx"。