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

news2024/11/28 16:40:50

如果是为了解决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>