Vue前端导出table表格数据

最新推荐文章于 2024-09-09 21:45:52 发布

一个小灰白

最新推荐文章于 2024-09-09 21:45:52 发布

阅读量429

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_42937980/article/details/129642148

版权

文章介绍了如何在前端页面上使用ElementUI的el-table组件，并结合$XLSX库以及FileSaver.js实现表格数据的xlsx格式导出功能。点击按钮触发exportExcel函数，该函数选择表格，转换为Excel书本格式，然后保存为文件供用户下载。

摘要由CSDN通过智能技术生成

前端页面上需要使用el-table

<el-button @click="exportExcel1()" type="primary" plain>导出</el-button>
					<el-table :data="renyuan1" id="outExcel">//id就是下面方法导出数据所用的id
					</el-table>

exportExcel，导出数据

exportExcel: function() {
				let tables = document.querySelector("#outExcel") //根据id选取到要导出的表格
				let table_book = this.$XLSX.utils.table_to_book(tables)
				let table_write = this.$XLSX.write(table_book, {
					bookType: "xlsx",
					bookSST: true,
					type: "array"
				})
				try {
					this.$FileSaver.saveAs(new Blob([table_write], {
						type: "application/octet-stream"
					}), "导出名单命名.xlsx")
				} catch (e) {
					console.log(e, table_write)
				}
				return table_write
			},