最近在开发中需要在前端页面导出Excel文件,最开始的实现方案本来是和后端同学配合,前端发送请求获取数据然后导出,后来发现这样的方案不能完全满足需求,原因是前端表单的一些特有的字段比如序号什么的也要导出,但是从后端传来的源数据是没有序号的,序号是前端页面加上的。所以后来还是选择了纯前端导出Excel文件的方案。
总体思路是通过html引入excel模板,再在html里放入表格内容(dom),然后转成blob文件流下载表格
实现表格导出的函数:
1 | export default function exportTable(table, exportName) { |
获取表格dom,我使用的框架是Vue,所以通过$refs来获取dom:
1 | let table = this.$refs.table.$el; |
传入参数到函数,就可以导出excel文件了:
1 | exportTable(table, tableName); |