前端 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

全部评论

相关推荐

矫健的闭门羹烹饪师又...:本人双非本,在鹅厂测开实习,你这个简历上写的这两个项目的技术栈都差不多,能够让面试官去延伸去问的八股除了redis就再没啥了,建议项目这边可以再改改,然后专业技能那块的话,感觉linux和测试工具可以分开写,毕竟不是干一件事的,反正没实习的基础上面试就深挖项目和八股,好好卷吧
听劝,我这个简历该怎么改...
点赞 评论 收藏
分享
下北澤大天使:你是我见过最美的牛客女孩😍
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务