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

什么是ejsExcel？

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

Excel模板

导出后

Github地址

ejsExcel

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

这篇文章是我在工作中因为业务需要，用到了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为例：

怎么样，很简单吧！

第二步：编写模板

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

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

第三步：获取数据源

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

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

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

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

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

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

  • vue-cli的webpack模板项目配置文件分析
  • 详解Weex基于Vue2.0开发模板搭建
  • vue模板语法-插值详解
  • Sublime Text新建.vue模板并高亮(图文教程)
  • Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
  • Vue.js学习笔记之常用模板语法详解
  • Vue单文件组件基础模板小结
  • Vue.js项目模板搭建图文教程
  • Vue工程模板文件 webpack打包配置方法
赞 (0)

相关推荐

  • 详解Weex基于Vue2.0开发模板搭建

    详解Weex基于Vue2.0开发模板搭建

    前言 最近有一些人反馈说在面试过程中常常被问到weex相关的知识,也侧面反映的weex的发展还是很可观的,可是目前weex的开发者大多数是中小型公司或者个人,大公司屈指可数,揪其原因可能是基于weex的开发正确的姿势大家并没有找到,而且市面上的好多轮子还是.we后缀的,众所周知,weex和vue一直在努力的进行生态互通,而且weex实现web标准化是早晚的问题,今天和大家分享一下weex基于vue2.0的开发框架模板~ 工作原理 先简单熟悉一下weex的工作原理,这里引用一下weex官网上的一直

  • Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)

    Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)

    数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout.js的实现方法. html代码 <div id="table-component-div"> <table-component v-for="item in data1" v-bind:list="item"></ta

  • Vue.js项目模板搭建图文教程

    Vue.js项目模板搭建图文教程

    前言 从今年(2017年)年初起,我们团队开始引入「Vue.js」开发移动端的产品.作为团队的领头人,我的首要任务就是设计 整体的架构 .一个良好的架构必定是具备丰富的开发经验后才能搭建出来的.虽然我有多年的前端开发经验,但就「Vue.js」来说,仍然是个新手.所幸「Vue.js」有一个配套工具「Vue-CLI」,它提供了一些比较成熟的项目模板,很大程度上降低了上手的难度.然而,很多具体的问题还是要自己思考和解决的. 项目划分 我们公司的H5产品大部分是嵌套在手机客户端里面的页面.每个项目的功能

  • vue-cli的webpack模板项目配置文件分析

    由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西,开发过程中需要改动到build和config里面一些相关的配置,所以刚好趁此机会将所有配置文件看一遍,理一理思路,也便于以后修改配置的时候不会"太折腾". 一.文件结构 本文主要分析开发(dev)和构建(build)两个过程涉及到的文件,故下面文件结构仅列出相应的内容. ├─build │ ├─build.js │ ├─check-versions.js │ ├─dev-client.js │ ├─dev-ser

  • Sublime Text新建.vue模板并高亮(图文教程)

    Sublime Text新建.vue模板并高亮(图文教程)

    本文介绍了 Sublime Text新建.vue模板并高亮(图文教程),分享给大家,也给自己留个笔记. 准备工作 下载安装新建文件模板插件 SublimeTmpl 下载安装vue语法高亮插件 Vue Syntax Highlight Sublime Text安装插件的方法有两种: 1.使用Sublime Text自带的安装库 Package Control 去安装 点击菜单栏的 Preferences -> Package Control 或使用快捷键 CTRL+SHIFT+P 打开终端窗口,输

  • Vue单文件组件基础模板小结

    背景 相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多: 1.代码集中,便于开发.管理和维护 2.可复用性高,直接将vue文件拷贝到新项目中 我暂时就想到这两点,童鞋们可以在评论里帮我补充:因为有这么多优点,所以决定有必要将vue组件的常用配置项提炼出来,形成一个组件模板,方便日后项目开发复用 <template> <div> <h1>{{title}}</h1> <ChildComponents></

  • Vue工程模板文件 webpack打包配置方法

    1.github github地址:https://github.com/MengFangui/VueProjectTemplate 2.webpack配置 (1)基础配置webpack.base.config.js const path = require('path'); //处理共用.通用的js const webpack = require('webpack'); //css单独打包 const ExtractTextPlugin = require('extract-text-webp

  • Vue.js学习笔记之常用模板语法详解

    Vue.js学习笔记之常用模板语法详解

    本文介绍了Vue.js 常用模板语法,分享给大家,具体如下: 一.文本渲染 Vue支持动态渲染文本,即在修改属性的同时,实时渲染文本内容.同时为了提高渲染效率,也支持只渲染一次,即第一次渲染出文本后,文本内容不再跟随属性值的变化而变化. 实时渲染 <div class="row"> <h2>文本 - 实时渲染</h2> <input type="text" v-model="msg" class=&quo

  • vue模板语法-插值详解

    1.文本 数据绑定最常见的形式就是使用'Mustache'语法(双打括号)的文本插值: <span>message:{{msg}}</span> 使用v-once指令,也能执行一次性的插值,当主句改变时,插值处的内容不会更新. 但请留心这回影响到该节点上所有的数据绑定: <span v-once>this will nver change:{{message}}</span> 2.纯html 双打括号会将数据解释为纯文本,而非html.为了输出html可以使

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

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

    什么是ejsExcel? ejsExcel是一款国人开发的.在Node.js应用程序中使用我们预先设置好的Excel模板导出Excel表格的模板引擎. Excel模板 导出后 Github地址 ejsExcel 如果因为众(ni)所(dong)周(de)知的原因打不开github,没有关系,它的语法很简单,都是一些对Excel模板格式的定义: 这篇文章是我在工作中因为业务需要,用到了ejsExcel这个模板引擎,觉得很不错,但是坑也不少.而网上相关的资料又太少,所以趁此机会总结了一下我的踩坑经历

  • Vue.js项目中管理每个页面的头部标签的两种方法

    在 Vue SPA 应用中,如果想要修改 HTML 的头部标签,如页面的 title ,我们只能去修改 index.html 模板文件,但是这个是全局的修改,如何为每个页面都设置不一样的 title 呢?下面介绍两种方法. 使用router.meta 在路由里面配置每个路由的地址: routes: [ { /* (首页)默认路由地址 */ path: '/', name: 'Entrance', component: Entrance, meta: { title: '首页入口' } }, {

  • vue.js项目中实用的小技巧汇总

    vue.js项目中实用的小技巧汇总

    前言 Vue.js 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用. # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm安装时,可能会出现一系列的错误 1.安装jQuery

  • Vue.JS项目中5个经典Vuex插件

    Vue.JS项目中5个经典Vuex插件

    使用 Vuex 来管理 Vue 的状态,有很多好的理由.其中之一就是,通过 Vuex 插件可以非常容易的扩展一些很酷的功能.Vuex 社区中的开发人员已经创建了大量的免费插件供你使用,有许多你能想象的功能,还有一些你可能没有想到的功能. 状态持久化同步标签页.窗口语言本地化管理多个加载状态缓存操作 1. 状态持久化 vuex-persistedstate 使用浏览器的本地存储( local storage )对状态( state )进行持久化.这意味着刷新页面或关闭标签页都不会删除你的数据. 一

  • Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验

    vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开箱即用,还支持自定义正则表达式.而且支持 40 多种语言,对本地化.多语言支持非常友好. 国内饿了么团队开源项目 Element UI 就用到了 vee-validate . vee-validate 官网:https://baianat.github.io/vee-validate/ 1. 安装

  • Vue.js项目前端多语言方案的思路与实践

    目录 一.通常有哪些内容需要处理 二.基本思路 三.具体实践中的一些细节 1.获取当前应该采用何种语言的getLang模块的实现 2.Vux组件的多语言包的配置 3.vux-loader的配置 4.自定义组件内外文案的多语言化 5.vuex-i18n的实现 6.图片的多语言化 7.在当前页面通过按钮切换当前语言后,如何更新当前页面的内容? 8.Yaml中特殊字符的转义 总结 前端的国际化是一个比较常见的需求.但网上关于这一方面的直接可用的方案却不多.最近刚做了一版基于Vue.js的多语言实现,在

  • vue.js项目使用原生js实现移动端的轮播图

    vue.js项目使用原生js实现移动端的轮播图

    目录 前言 一.了解原生js移动端的事件 二.轮播图实战 第一部分:template模板 第一部分解读: 第二部分:script标签内代码 第二部分解读: 第三部分:css样式部分 三.效果图 结束语 前言 今天我在vue.js项目实战开发过程中遇到了实现轮播图效果的问题,因为不想因为一个轮播图而引用整个jquery,而且我还发现自己根本就不清楚移动端的一些事件,所以我就进行了一些资料查找,并最终解决了这个问题,接下来跟大家分享一下我的解决问题的过程. 一.了解原生js移动端的事件 原生js移动

  • vue.js项目打包上线的图文教程

    vue.js项目打包上线的图文教程

    最近一直坚持每个月写一个小的vue.js 开发的项目,最后开发完成后想到很久之前给别人回答的一个问题:vue的项目如何上线,当时有千奇百怪的回答,我在想,这些人都是肿了么,vue的官方都说了,这个框架只是做了view这一层,所以并不是把这些开发完的东西直接拷贝到服务器上,而且需要打包为静态文件上传服务器的.这里我简单的列出这个过程: 首先需要修改一下配置文件再打包,很多人都是遇到过打包后运行一片空白等等问题,这些问题主要就是路径的问题,所以需要修改config下面的index.js这个配置文件里

  • vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)

    html代码: <section class="container page-home"> <div id="main-content" class="wrap-container zerogrid"> <article id="news_content" v-for="item in items"> <div class="col-1-2 right&q

随机推荐