前端 vue 项目中导出 table 为 excel 表格

背景介绍:
使用 vue 框架以及vue的其他生态系统,组件库使用的是 element-ui

首先要安装两个包:XLSX,file-saver
xlsx 官方文档(英文):xlsx

npm install --save xlsx file-saver

现在有一个按钮,和一个表格,点击按钮发生导出表格的事件。

// template
<el-botton @click="export">export</el-button>
<el-table id="table">...</el-table>

// script
import XLSX from 'xlsx'
import FileSaver from 'file-saver'
...
methods:{
	export() {
		let table = document.getElementById('table');
		let workboodout = XLSX.write(workbook, { bookType: 'xlsx', bookSST: true, type: 'array'});
      	try {
        	FileSaver.saveAs(new Blob([workboodout], { type: 'application/octet-stream'}), 'table.xlsx');
        	// table.xlsx 为导出的文件名,可自定义
      	} catch (e) {
        	console.log(e, workboodout);
      	}
      	return workboodout;
	}
}


更新:2019/3/28

发现只用 XLSX 一个包就可以了。 因此只需安装 xlsx:
npm install --save xlsx
let table = document.getElementById('table');
let worksheet = XLSX.utils.table_to_sheet(table);
let workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'sheet');
// 以上四行也可以直接一行搞定,如果不需要对表格数据进行修改的话
let workbook = XLSX.utils.table_to_book(document.getElementById('table'))
try {
	XLSX.writeFile(workbook, 'text.xlsx');
} carch(e) {
	console.log(e, workbook);
}

更加简洁有木有!
另外附上xlsx常用的方法:

XLSX.utils.sheet_to_csv generates CSV
XLSX.utils.sheet_to_txt generates UTF16 Formatted Text
XLSX.utils.sheet_to_html generates HTML
XLSX.utils.sheet_to_json generates an array of objects
XLSX.utils.sheet_to_formulae generates a list of formulae

全部评论

相关推荐

伟大的烤冷面被普调:暨大✌🏻就是强
点赞 评论 收藏
分享
10-05 23:02
东北大学 Java
我说句实话啊:那时候看三个月培训班视频,随便做个项目背点八股,都能说3 40w是侮辱价
点赞 评论 收藏
分享
点赞 收藏 评论
分享
牛客网
牛客企业服务