效果展示
- 页面展示
- 点击导出,就会到浏览器的下载目录中
- 导出的表格数据展示
一、下载库
npm i xlsx
npm i file-saver
二、引入使用
import FileSaver from "file-saver";
import * as XLSX from "xlsx";
三、可以将导出方法放在utils文件中,方便复用
代码如下(示例):
import FileSaver from "file-saver";
import * as XLSX from "xlsx";
export const exportExcel = (name: string, tableName: string) => {
const sheetObj = XLSX.utils.table_to_book(document.querySelector(tableName));
const sheetBlob = XLSX.write(sheetObj, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
new Blob([sheetBlob], { type: "application/octet-stream" }),
name
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, sheetBlob);
}
return sheetBlob;
};
四、模板中使用
代码如下(示例):
<template>
<el-table :data="tableData" border id="tableId">
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" width="280" />
</el-table>
<el-button
type="primary"
style="margin-top: 20px"
@click="exportExcel('tableData.xlsx', '#tableId')"
>导出</el-button
>
</template>
<script lang="ts" setup>
import { exportExcel } from "@/utils/index";
const tableData = [
{
date: "2016-05-03",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
date: "2016-05-02",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
date: "2016-05-04",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
date: "2016-05-01",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
];
</script>
注意事项
1. 下载 file-saver 库之后,ts可能会飘红。
两种解决办法:
npm i npm i --save-dev @types/file-saver
在env.d.ts 文件中声明一下