别再说前端导出excel麻烦了(xlsx插件用法)

插件用法)"/>

别再说前端导出excel麻烦了(xlsx插件用法)

如果是为了解决el-teable的固定列导出问题，直接移动至文章末
本文使用的插件安装指令（第一个为一起安装，下面的是独立安装）

npm install --save xlsx file-saver或
npm install --save xlsx  
npm install --save file-saver

表格导出为excel文件

需求：导出element ui的表格，或者一些其它组件的表格

进行此操作需要简单了解以下知识(当前是setup语法糖的写法)：
以下都是固定写法，不需要记住，知道有这个东西即可

<table id="table"></table><script setup>import { writeFile, write, read, utils } from "xlsx";//注意，当前的xlsx似乎已经变为按需导入内容，并不能直接导入xlsx//列如：import xlsx from "xlsx";这种会报错，并且在xlsx源码中(简单查阅，本人菜鸡一个)没有进行export default xlsx//因此现在必需采用按需导入的形式//xlsx用法const exportExcel = () => {//这个是最简单的导出方式，都是固定写法,writeFile第二个参数为导出的文件名，正常开发都是以时间戳进行命名const wb = utils.table_to_book(document.querySelector("#table"));writeFile(wb, "SheetJSVueHTML.xlsx");};
</script>

表格导出excel的实现(vue文件代码)：

<template><div><el-table :data="list" class="tableList"><el-table-column prop="name" label="计划跟进人"></el-table-column><el-table-column prop="age" label="年龄"> </el-table-column></el-table><button @click="daocu">导出</button></div>
</template>
<script setup>import { writeFile, write, read, utils } from "xlsx";let list = [{ name: "tjq", age: 18 },{ name: "wyz", age: 18 },];const daocu = () => {const wb = utils.table_to_book(document.querySelector(".list"));writeFile(wb, "SheetJSVueHTML.xlsx");};
</script><style scoped >.list {width: 200px;height: 200px;}
</style>

但是这边会遇到一个问题，在固定列导出时(用到element的 fixed="left"属性)，会根据当前固定列的个数来重复导出表格数据，这对于我们来说当然是不行的，至于原因吗，自行百度即可(偷偷告诉你，在浏览器开发者模式下找到el-table__fixed-body-wrapper元素，并且删掉或修改内容，就能观察到一点门道了)

固定列导出问题解决方法

解决思路:

<script setup>import FileSaver from "file-saver";import { writeFile, write, read, utils } from "xlsx";const daocu = () => {//el-table__fixed这里仅仅是el-table的固定列类名let fixflg = document.querySelector(".el-table__fixed"); // 判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去，严谨一点的话，应该是document.querySelector(".tableList").querySelector(".el-table__fixed")，确保是在我们导出的表格中出现的固定列let wb;if (fixflg ) {wb = utils.table_to_book(document.querySelector(".tableList").removeChild(fixflg ));document.querySelector(".tableList").appendChild(fixflg );} else {wb = utils.table_to_book(document.querySelector(".tableList"));}//文章下列附加wirte方法的属性说明let wbout = write(wb, { bookType: "xlsx", bookSST: true, type: "array" });try {//FileSaver插件，详细的我也没具体看,FileSaver.saveAs我猜测，大概是把blob文件流转为对应类型的文件，并且触发下载功能FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }),"文件命名.xlsx");} catch (e) {if (typeof console !== "undefined") console.log(e, wbout);}return wbout;};
</script>

write配置项属性

该图片来源地址