ejsExcel模板在Vue.js项目中的实际运用


Posted in Javascript onJanuary 27, 2018

什么是ejsExcel?

ejsExcel是一款国人开发的、在Node.js应用程序中使用我们预先设置好的Excel模板导出Excel表格的模板引擎。

Excel模板

ejsExcel模板在Vue.js项目中的实际运用

导出后

ejsExcel模板在Vue.js项目中的实际运用

Github地址

ejsExcel

如果因为众(ni)所(dong)周(de)知的原因打不开github,没有关系,它的语法很简单,都是一些对Excel模板格式的定义:

ejsExcel模板在Vue.js项目中的实际运用

这篇文章是我在工作中因为业务需要,用到了ejsExcel这个模板引擎,觉得很不错,但是坑也不少。而网上相关的资料又太少,所以趁此机会总结了一下我的踩坑经历。
我是在Vue.js这个前端框架中用到的ejsExcel,由于我本人并不是专业做前端开发的,我会尽量的说清楚,如果有些地方写的不是太专业的话,还请见谅!

第一步:安装ejsExcel

npm install ejsexcel

安装完依赖包之后是放在xxx/node_modules/ejsexcel目录下的,核心文件是ejsExcel.js,所以如果想要使用该模板引擎,必须引入该文件:

import Excel from 'exceljs'

踩坑一:

安装完之后,官方是给了一个测试案例的,放在ejsexcel/test目录下,我建议初学者先不要放在实际项目中使用,自己先另开一个进程运行一下测试案例。
在github中,作者给出方法是在test目录下运行test.bat这个文件,经过我实际的测试,该命令在windows系统中,需要使用

node test.bat

命令才可以运行成功,而在Mac中,是运行不了的。

如果要在Mac端运行,使用

node testExcel.js

运行即可。

测试案例很简单,当你看懂测试案例是如何运作的之后剩下的就没有问题了,没看懂的也没关系,以我们上面运行的testExcel.js为例:

ejsExcel模板在Vue.js项目中的实际运用

怎么样,很简单吧!

第二步:编写模板

根据自己的业务逻辑,将你要导出的数据按照上面的语法在Excel中写好,这一步不难,只是有点烦,需要你有点耐心。

编写好模板之后,可以将它放到你的项目中去,具体放在哪里随便你,但是最好不要离核心代码太远,毕竟我们在渲染数据时是需要读取模板路径的,放的路径太深,麻烦的还是自己。

第三步:获取数据源

test中的测试例子,都是一些假数据,但是在实际的开发中我们需要根据需求,动态的获取数据和导出数据。

我的做法是将核心文件的引入、数据的获取、Excel模板的渲染分装成三个部分。然后再使用export default导出这些方法,使其可以被全局调用。

ejsExcel模板在Vue.js项目中的实际运用

在Vue中,我做了一个导出按钮,当点击这个button时,触发方法,去获取我们data{}中的数据,获取到数据后作为参数,传入我们封装好的数据源方法中

ejsExcel模板在Vue.js项目中的实际运用

然后在getMachiningData方法中获取参数,并格式化。

ejsExcel模板在Vue.js项目中的实际运用

第四步:使用数据渲染模板

再调用renderDataUseTemp方法,将格式化好的数据传入,进行数据的渲染:

ejsExcel模板在Vue.js项目中的实际运用

保存的路径是你自己定的,你也可以自己写一个方法,动态的选择文件渲染好之后的存储路径。

大概就是这么多,业务逻辑方面其实不难,可能就是在制作Excel模板时需要一点耐心和细心。
上面的这些都是我自己在项目中的代码,请千万不要局限于我写的代码,思路最重要,要根据实际情况来处理业务。只要思路理清了,问题就解决一大半了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中window.event事件用法详解
Dec 11 Javascript
JavaScript实现快速排序(自已编写)
Dec 19 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
javascript验证身份证完全方法具体实现
Nov 18 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 Javascript
JavaScript的各种常见函数定义方法
Sep 16 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
学习JavaScript设计模式(接口)
Nov 26 Javascript
常见的浏览器Hack技巧整理
Jun 29 Javascript
angularJs中json数据转换与本地存储的实例
Oct 08 Javascript
手淘flexible.js框架使用和源代码讲解小结
Oct 15 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 #Javascript
javascript获取图片的top N主色值方法详解
Jan 26 #Javascript
Vue中render方法的使用详解
Jan 26 #Javascript
Angular利用trackBy提升性能的方法
Jan 26 #Javascript
微信小程序版翻牌小游戏
Jan 26 #Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
Jan 26 #Javascript
微信小程序wx.getImageInfo()如何获取图片信息
Jan 26 #Javascript
You might like
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
?生?D片??C字串
2006/12/06 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
javascript数据结构之双链表插入排序实例详解
2015/11/25 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
js实现九宫格布局效果
2020/05/28 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
Python数据结构之翻转链表
2017/02/25 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
Python运行DLL文件的方法
2020/01/17 Python
python numpy数组中的复制知识解析
2020/02/03 Python
Python如何实现的二分查找算法
2020/05/27 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
java字符串格式化输出实例讲解
2021/01/06 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
美国最大的购物网站:Amazon.com(亚马逊美国)
2020/05/23 全球购物
PHP数据运算类型都有哪些
2013/11/05 面试题
工地安全检查制度
2014/02/04 职场文书
趣味比赛活动方案
2014/02/15 职场文书
教你怎么用python实现字符串转日期
2021/05/24 Python