借助插件实现表格数据导出为execl
安装插件
npm install --save xlsx file-saver
cnpm install --save xlsx file-saver
给表格添加id,导出的时候需要用到
<!-- 表格 -->
<el-table
id="out-table"
:data="PowerList" border
style="width: 100%"
class="tableBox">
</el-table>
使用的页面引入依赖
// 引入导出Excel表格依赖
import * as FileSaver from "file-saver";
import * as XLSX from "xlsx";
点击导出按钮实现导出
<!-- 导出按钮 -->
<el-button type="primary" @click="exportExcel">导出</el-button>
// 导出表格 按钮点击后触发事件
const exportExcel = () => {
/* 从表生成工作簿对象 */
var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
/* 获取二进制字符串作为输出 */
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
try {
FileSaver.saveAs(
//Blob 对象表示一个不可变、原始数据的类文件对象。
//Blob 表示的不一定是JavaScript原生格式的数据。
//File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
//返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。
new Blob([wbout], { type: "application/octet-stream" }),
//设置导出文件名称
"idea.xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
}
导出封装
如果我们多页面使用导出每个页码引入使用导出代码,会非常的臃肿,所以我们需要进行封装
封装
在src新建hock文件夹里边新建export.js文件写入导出代码
// 引入导出Excel表格依赖 封装
import * as FileSaver from "file-saver";
import * as XLSX from "xlsx";
const download = (name:string = "idea.xlsx", id:string = "#out-table")=>{ //name表示导出的文件名 id表示表格定义的id 可传可不传
var wb = XLSX.utils.table_to_book(document.querySelector(id));
/* 获取二进制字符串作为输出 */
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
try {
FileSaver.saveAs(
//Blob 对象表示一个不可变、原始数据的类文件对象。
//Blob 表示的不一定是JavaScript原生格式的数据。
//File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
//返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。
new Blob([wbout], { type: "application/octet-stream" }),
//设置导出文件名称
name
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
}
export {
download
}
使用
需要在页面使用的时候引入,点击的时候调用
注意:使用时必须为表格绑定id
import { download } from '@/hook/export' //引入封装的导出函数
//点击导出
const downloadexport = () => {
// 调用封装的导出传入名字
download("LTV.xlsx") //可接受两个参数第一个为导出的文件名,第二个为table绑定的id
}