原生table表格使用js导出excel表

另一个自己IT

于 2022-11-15 14:19:21 发布

阅读量671

点赞数

文章标签： excel 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_46408500/article/details/127865069

版权

这篇博客介绍了如何在前端应用中利用'file-saver'和'xlsx'库将表格数据导出为.xlsx格式的Excel文件。首先，需要安装这两个依赖。接着，在组件中引入它们。然后，在组件的方法中定义一个导出Excel的函数，该函数从指定的表格DOM中获取数据，并调用XLSX库的write方法生成二进制字符串。最后，使用File-Saver保存为文件。用户可以通过点击按钮触发导出操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装相关依赖
主要是两个依赖

npm install --save xlsx file-saver

2、组件里头引入

	 import FileSaver from 'file-saver'
	 import * as XLSX from 'xlsx'

3、组件methods里写一个方法

// 表格导出
			exportExcel(name) {
				/* generate workbook object from table */
				var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
				/* 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'
					}), name+'.xlsx')
				} catch (e) {
					if (typeof console !== 'undefined') console.log(e, wbout)
				}
				return wbout
			},

注:#out-table是表格dom的id
name 是要设置的表单名称

4、使用

<button style="cursor:pointer" @click="exportExcel('省内客流来源统计报表')">点击导出</button>