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 相关文章推荐
window.ActiveXObject使用说明
Nov 08 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
Jan 13 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
Jul 18 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
Dec 10 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
Jan 22 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
Vue.js 动态为img的src赋值方法
Mar 14 Javascript
vue中rem的配置的方法示例
Aug 30 Javascript
vue cli使用融云实现聊天功能的实例代码
Apr 19 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 Javascript
JavaScript基于SVG的图片切换效果实例代码
Dec 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
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
javascript一点特殊用法
2008/05/28 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
原生js实现form表单序列化的方法
2018/08/02 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
解决layer.prompt无效的问题
2019/09/24 Javascript
vue封装swiper代码实例解析
2019/10/08 Javascript
js实现select下拉框选择
2020/01/11 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
python操作MySQL数据库的方法分享
2012/05/29 Python
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
轻量级的Web框架Flask 中模块化应用的实现
2017/09/11 Python
Python实现简单求解给定整数的质因数算法示例
2018/03/25 Python
flask项目集成swagger的方法
2020/12/09 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
学习经验演讲稿
2014/05/10 职场文书
低碳环保演讲稿
2014/08/28 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书
2016预备党员培训心得体会
2016/01/08 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL
oracle重置序列从0开始递增1
2022/02/28 Oracle