Vue3+element实现表格数据导出
作者：DCodes
这篇文章主要为大家学习介绍了Vue3如何利用element实现表格数据导出功能，文中的示例代码讲解详细，感兴趣的小伙伴快跟随小编一起学习一下吧
实现效果
导出后的效果：
步骤
第一步：安装依赖
npm install --save xlsx file-saver
第二步：给表格添加id，导出的时候需要用到
<!-- 导出按钮 -->
<el-button type="primary" @click="exportExcel">导出</el-button>
<!-- 表格 -->
<el-table
id="out-table" // 添加id 这一步很重要
:data="PowerList" border
style="width: 100%"
class="tableBox">
</el-table>
<!-- 表格end -->第三步：引入依赖
// 引入导出Excel表格依赖 import * as FileSaver from "file-saver"; import * as XLSX from "xlsx";
第四步：导出
// 导出表格 按钮点击后触发事件
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;
}这种导出方式跟渲染的表格数据是关联 ，如果想要全部导出，可以查询所有再导出。有些情况下，表格数据是后台接口返回的，这个时候需要调用接口来导出表格，关于调用后台接口实现Excel导出功能请看另一篇：调用后台接口实现Excel导出功能以及导出乱码问题解决
到此这篇关于Vue3+element实现表格数据导出的文章就介绍到这了,更多相关Vue3 element表格数据导出内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！