Vue2.0实现将页面中表格数据导出excel的实例
这两天学习了Vue.js 感觉知识点挺多的，所以，今天添加一点小笔记。
项目中将后台返回的数据v-for到表格中，然后需要将这个表格导出为EXCEL
只说怎么做。
一、需要安装三个依赖：
npm install -S file-saver xlsx npm install -D script-loader
二、项目中新建一个文件夹：（vendor---名字任取）
里面放置两个文件Blob.js和 Export2Excel.js。
Blob.js和 Export2Excel.js文件下载地址：Export2Exce_jb51.rar
三、在.vue文件中
写这两个方法：其中list是表格的内容
export2Excel() {
require.ensure([], () => {
const { export_json_to_excel } = require('../../vendor/Export2Excel');
const tHeader = ['序号', 'IMSI', 'MSISDN', '证件号码', '姓名'];
const filterVal = ['ID', 'imsi', 'msisdn', 'address', 'name'];
const list = this.tableData;
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '列表excel');
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
四、按钮导出调用export2Excel方法
注：如果webpack报解析错误：
在build----webpack.base.conf.js中resolve的alias加入 'vendor': path.resolve(__dirname, '../src/vendor'),
即可解决
另：alias是配置别名
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
vue.js表格组件开发的实例详解
前言 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件开发的基础 组件可以扩展 HTML 元素,封装可重用的代码.我理解为功能模块的模板吧. 对于vue来说,组件是这个样子的,我们在html里面写 <div id="example"> <my-compone
-
vue.js表格分页示例
分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理. 效果: 代码: 1.注册一个组件 js Vue.component('pagination',{ template:'#paginationTpl', replace:true, props:['cur','all','pageNum'], methods:{ //页码点击事件 btnClick: function(index){ if(index != this.cu
-
vue实现简单表格组件实例详解
本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件.vue的核心思想就是组件,什么是组件呢?按照我的理解组件就是装配页面的零件,比如一辆车有大大小小许多零件组成,那么同样的一个页面,也是有许多组件构成的比如说头部组件 按钮组件等等,vue三大核心组件 路由 状态管理,路由控制页面的渲染,页面由组件组成,数据有vuex进行管理和改变.下面我会以一个简单的案例来说 第一步:构建一个简单的vue项目,老规矩
-
Vue 固定头 固定列 点击表头可排序的表格组件
原理是将原table的指定行,指定列clone一份放在其上 实现代码如下: <template> <div> <div id="divBox1" :style="{height:height}"> <table id="tbTest1" cellpadding="0" cellspacing="0" style="text-align:center;bac
-
Javascript vue.js表格分页，ajax异步加载数据
分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理. 效果: 代码: 1.注册一个组件 js Vue.component('pagination',{ template:'#paginationTpl', replace:true, props:['cur','all','pageNum'], methods:{ //页码点击事件 btnClick: function(index){ if(index != this.cu
-
基于Vue.js的表格分页组件
一.Vue.js简介 1.Vue的主要特点: (1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化 (1) 简洁 下面看一段Angular的实现双向绑定的代码 // html <body ng-app="myApp"> <div ng-controller="myCtrl"> <p>{{ note }}</p> <input type="text" ng-
-
vue.js+Element实现表格里的增删改查
新项目使用的是vue.js 后来发现饿了吗前端编写的一套框架Element (http://element.eleme.io/#/zh-CN)来配合vue.js进行样式填充 之前用过angularjs 用到后来 发现越来越难学 于是就决定用vue.js 下面就介绍一下vue.js应用在表格里的增删改查 首先引入一下element的js <script src="plugins/element-ui/index.js"></script> 然后引入需要用到的vue
-
vue.js 表格分页ajax 异步加载数据
Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理. 1.注册一个组件 js Vue.component('pagination',{ template:'#paginationTpl', replace:true, props:['cur','all','pageNum'], methods:{ //页码点击事件 btnClick: f
-
Vue2.0实现将页面中表格数据导出excel的实例
这两天学习了Vue.js 感觉知识点挺多的,所以,今天添加一点小笔记. 项目中将后台返回的数据v-for到表格中,然后需要将这个表格导出为EXCEL 只说怎么做. 一.需要安装三个依赖: npm install -S file-saver xlsx npm install -D script-loader 二.项目中新建一个文件夹:(vendor---名字任取) 里面放置两个文件Blob.js和 Export2Excel.js. Blob.js和 Export2Excel.js文件下载地址:E
-
vue2.0 + element UI 中 el-table 数据导出Excel的方法
1.安装相关依赖 主要是两个依赖 npm install --save xlsx file-saver 如果想详细看着两个插件使用,请移步github. https://github.com/SheetJS/js-xlsx https://github.com/eligrey/FileSaver.js 2.组件里头引入 import FileSaver from 'file-saver' import XLSX from 'xlsx' 3.组件methods里写一个方法 exportExcel
-
Java SpringMVC框架开发之数据导出Excel文件格式实例详解
在平时的开发中,我们会经常遇到这样一个需求,要在页面通过一个『导出』按钮把查询出的数据导出到 Excel 表格中.本文即为实现上述需求的一个小实例. 环境配置 jar包 poi.jar jdk 1.6 tomcat 7.0 eclipse 4.4.0 本 Demo 是在 SpringMVC框架中实现. 页面 export.jsp 很简单,就只有一个超链接. <%@ page language="java" contentType="text/html; charset=
-
python技能之数据导出excel的实例代码
本文介绍了python技能之导出excel的实例代码,正好能用到,写出来分享给大家 作为一个数据分析师,下面的需求是经常会遇到的. 从数据库或者现有的文本文件中提取符合要求的数据,做一个二次处理,处理完成后的数据最终存储到excel表格中供其他部门的人继续二次分析. 在这里Excel作为一个必不可少桥梁,合适的工具和方法可以避免我们将处理完的数据耗费时间一行行复制黏贴过去. python编程也是一个数据分析师的必备技能,你永远无法预料你的数据会来自哪里,需要经过怎样复杂的过滤,筛选,排序,组合处
-
java web开发中大量数据导出Excel超时(504)问题解决
import java.io.IOException; import java.io.OutputStream; import java.lang.reflect.Field; import java.text.SimpleDateFormat; import java.util.Date; import java.util.HashMap; import java.util.List; import java.util.Map; import java.util.Map.Entry; impo
-
vue2.0结合DataTable插件实现表格动态刷新的方法详解
本文实例讲述了vue2.0结合DataTable插件实现表格动态刷新的方法.分享给大家供大家参考,具体如下: 产品提出的需求是这样的,很普通的一个统计server端task完成率和状态的表格,要自动刷新其中的数据,并且当单个task完成的时候report给server端,看起来好easy好easy的一个需求啊!且听我说完哈! 我这边使用的是框架是vue,表格自然用v-for渲染,然后我们这边分页搜索神马的都是前端弄,也就是说后端只管把一大坨数据塞到前端,然后前端自己组装分页器和完成模糊搜索,所以
-
Vue2.0+ElementUI+PageHelper实现的表格分页功能
前言 最近做了一些前端的项目,要对表格进行一些分页显示.表格分页的方法有很多,从宏观上来说分为物理分页和逻辑分页,由于逻辑分页(即前端分页)的做法是将数据全部缓存,然后分页显示,这样在数据量较大的时候会对浏览器的速度产生影响,所以考虑之后我使用了后端分页,后端分页的特点是对当前页的数据进行请求,每次当页码变化或者每页数据量变化的时候,就重新发一次请求.这里所用到的技术主要有以下几种: Spring SpringMVC Mybatis VueJS 2.0 ElementUI 后端数据库用的是Mys
-
详解vue2.0的Element UI的表格table列时间戳格式化
这两天学习了vue2.0的Element UI的表格table列时间戳格式化,所以,今天添加一点小笔记. 表格属性 <el-table :data="tableData" v-loading.body="loading" border @selection-change="selectionChange" style="width: 100%"> <el-table-column prop="cre
-
C#读取word中表格数据的方法实现
前些日子有一个项目需要从word文件中取表格数据并进行处理,网上大部分方案都是基于office的com组件实现,但是这样有一个缺点,如果电脑里没有安装office将无法使用,因为之前操作excel都是使用的NPOI,所以理所当然的想用NPOI解决此问题. 于是找到了如下代码 private List<string> GetDoc(string Path) { if (Path == "") return null; //文件路径为空 List<string> R
-
在页面中输出当前客户端时间javascript实例代码
时间对象(Date())比较简单,本文旨在为初学者入门使用,大牛可略过! 本文承接基础知识实例,说一下实例的要求: 在页面中输出当前客户端时间(2015年1月1日星期一10:10:10这样的格式),每过一秒中页面不刷新,但是时间自动更新(用两种定时器方法都可以实现),鼠标点击时间,如果原先运动则停止,如果停止则继续运动: 要求基本上可分为2部分:一是不刷新自动更新时间,二是点击时间停止或更新时间 好,那我们还是老规矩,一步一步来,既然是时间,那就会用到时间对象 new Date(); var n