首页 > 其他分享 > 【Vue项目实践】(vue3 + Element Plus)excel 导出

【Vue项目实践】(vue3 + Element Plus)excel 导出

时间:2022-09-25 18:12:52浏览次数:75  
标签:wbout xlsx Vue excel 导出 Element Plus table

安装依赖

yarn add --save xlsx file-saver

1、添加导出按钮以及点击事件
<el-button type="primary" round @click="exportClick ">导出表格</el-button>
2、在table表格中添加id
<el-table :data="tableData" style="width: 100%" id="myTable">
3、写点击事件的方法函数
const exportClick = () => {
	var wb = XLSX.utils.table_to_book(document.querySelector('#my-table'));//关联dom节点
	/* get binary string as output */
	var wbout = XLSX.write(wb, {
		bookType: 'xlsx',
		bookSST: true,
		type: 'array'
	})
	try {
		FileSaver.saveAs(new Blob([wbout], {
			type: 'application/octet-stream'
		}), '工资表.xlsx')//自定义文件名
	} catch (e) {
		if (typeof console !== 'undefined') console.log(e, wbout);
	}
	return wbout
};

参考博客:
基于Element Plus 表格导入和导出excle文件

标签:wbout,xlsx,Vue,excel,导出,Element,Plus,table
From: https://www.cnblogs.com/panie2015/p/16728396.html

相关文章