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中URL编码函数代码
Jan 11 Javascript
web基于浏览器的本地存储方法应用
Nov 27 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 Javascript
详解vue-cli 构建Vue项目遇到的坑
Aug 30 Javascript
boostrap模态框二次弹出清空原有内容的方法
Aug 10 Javascript
echarts统计x轴区间的数值实例代码详解
Jul 07 Javascript
Vue内部渲染视图的方法
Sep 02 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 Javascript
JavaScript实现alert弹框效果
Nov 19 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
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
PHP日期时间函数的高级应用技巧
2009/05/16 PHP
php session和cookie使用说明
2010/04/07 PHP
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
一个非常完美的读写ini格式的PHP配置类分享
2015/02/12 PHP
用php来限制每个ip每天浏览页面数量的实现思路
2015/02/24 PHP
PHP中cookie知识点学习
2018/05/06 PHP
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
jquery中ajax学习笔记4
2011/10/16 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
2015/07/08 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
微信小程序轮播图swiper代码详解
2020/12/01 Javascript
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
python 调用win32pai 操作cmd的方法
2017/05/28 Python
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
python3.6使用pymysql连接Mysql数据库
2018/05/25 Python
Django实现一对多表模型的跨表查询方法
2018/12/18 Python
python元组和字典的内建函数实例详解
2019/10/22 Python
PyTorch学习:动态图和静态图的例子
2020/01/06 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
介绍一下常见的木马种类
2014/11/15 面试题
Java servlet面试题
2012/03/04 面试题
求职简历中的自我评价分享
2013/12/08 职场文书
求职信的七个关键技巧
2014/02/05 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
志愿者宣传口号
2014/06/17 职场文书
山楂树之恋观后感
2015/06/11 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL