node.js/VUE项目中导出excel表格的多种实现方法(D2admin适用)

方法一、vue+js-xlsx

1.vue项目内安装两个依赖:xlsx、file-saver
 npm install xlsx --save
 npm install file-saver --save
2.组件中引入
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
3.组件代码

定义一个按钮来触发导出事件;
使用elementUI的表格格式,要定义一个id:table-content;
写两个方法实现导出功能 exportToExcel()、printContent())







·效果:样式普通,若增加样式需要手写样式文件及插件,导入引用,后期修改麻烦。

方法二、node.js+ejsExcel

1.git下载插件代码

https://github.com/sail-sail/ejsExcel
http://git.oschina.net/ccteams/ejsExcel

2.安装模块依赖

npm install ejsexcel

3.执行 test/test.bat

·效果:先做好excel模板,然后往模板中填充数据,生成后下载。后期模板修改比较方便,直接修改模板excel就可以。

附上该模块作者信息(作者人很nice,有问题在Q群中提问,都会很及时解答):

Auto: Sail 黄智勇

QQ:151263555

Q群:470988427

Email:[email protected]

CSDN原文:https://blog.csdn.net/f1gh151263/article/details/51740705

segmentfault社区详细文档:https://segmentfault.com/a/1190000012992783

方法三、基于jQuery的table2excel

1.下载相关插件

jquery-3.3.1.min.js、jquery.table2excel.js

2.HTML引用js文件(D2Admin框架中的引用插件路径:..\Marketregulation\public\index.html)

并将文件放到对应路径下

3.组件内:

  • 定义一个按钮来触发导出事件;
  • 使用elementUI的表格格式,要定义一个id:table-content;
  • 在js中写exportToExcel()方法实现导出功能 
methods:{
exportToExcel(){
$("#tblExport").table2excel({
exclude : ".noExl", //过滤位置的 css 类名
filename : "导出excel表-" + new Date().getTime() + ".xls" //文件名称
});
}
}

4.若想修改导出的excel样式设置,直接修改jquery.table2excel.js脚本文件即可

找到脚本的mid: 加入样式代码''

 

你可能感兴趣的:(D2admin,vue,JQuery)