Vue2.0---将页面中表格数据导出excel
这不是教程,是随笔。
项目中将后台返回的数据v-for到表格中,然后需要将这个表格导出为EXCEL
只说怎么做。
一、需要安装三个依赖:
npm install -S file-saver xlsx
npm install -D script-loader
二、项目中新建一个文件夹:(vendor---名字任取)
里面放置两个文件Blob.js和 Export2Excel.js。
百度可下载。
三、在.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是配置别名
pass:需要那两个文件的可以加我微信 18210001575
Vue2.0---将页面中表格数据导出excel的更多相关文章
- 将页面中表格数据导出excel格式的文件(vue)
近期由于项目需要,需要将页面中的表格数据导出excel格式的文件,折腾了许久,在网上各种百度,虽然资料不少,但是大都不全,踩了许多坑,总算是皇天不负有心人,最后圆满解决了. 1.安装相关依赖(npm安 ...
- Vue+element UI实现表格数据导出Excel组件
介绍 这是一个可以将页面中的表格数据导出为Excel文件的功能组件,该组件一般与表格一起使用,将表格数据传给组件,然后通过点击组件按钮可将表格中的数据导出成Excel文件. 使用方法 由于封装该组件内 ...
- 前端 vue表格数据导出Excel 文件实现
实现思路 使用json2csv将后台json数据转化为csv格式数据 采用创建Blob(二进制大对象)的方式来存放缓存数据: 生成下载链接: 创建一个a标签,设置href和download属性 触发a ...
- vue2.0在页面中自定义组件模块,以及页面与组件之间的数据传递
1,在初始文件index.html中加入要引入的模块,注意驼峰命名的方式(我就是没写成驼峰,报错) <!DOCTYPE html> <html> <head> &l ...
- JS将页面中表格,导出到Excel中(IE中)
原文地址:http://blog.csdn.net/sinat_15114467/article/details/51098522 var idTmr; function getExplorer() ...
- ASP.Net MVC中数据库数据导出Excel,供HTTP下载(转)
转自http://www.cnblogs.com/hipo/archive/2012/03/13/2394019.html 一.关于下载 一般对下载权限有没有限制,或安全性要求不高的情况下,基于web ...
- ASP.Net MVC中数据库数据导出Excel,供HTTP下载
本文来自:http://www.cnblogs.com/hipo/archive/2012/03/13/2394019.html 一.关于下载 一般对下载权限有没有限制,或安全性要求不高的情况下,基于 ...
- 前端表格数据导出excel
使用tableExport.js导出bootstrap-table表格成excel并且支持中文 1. 下载tableExport.js https://github.com/hhurz/tableEx ...
- MVC 实现表格数据导出Excel(NPOI方式)
前端View(@ViewBag为查询条件): <span id="exprobtn" class="btn_blue" style="dispa ...
随机推荐
- C Makefile初学基础
# this is make file hello.out: max.o min.o hello.c gcc max.o min.o hello.c -o hello.out max.o:max.c ...
- qthread线程
一般调用quit()函数之后可以紧接着调用wait()函数确保线程退出.sleep()等让线程休眠的函数不需要调用,因为Qt中线程是事件驱动机制.但是如果是继承的QTHread类,在run()函数中使 ...
- qt02 textEdit
1.向QTextEdit中当前光标位置添加一行字符串message ui.messageTextEdit->textCursor().insertText(message+"\n&qu ...
- const定义的并非是常量,而是常量索引
我第一次看const的时候,记忆中对const的定义是,定义常量. 后经过研究,定义的并非常量,而是常量索引. 有时候会遇到使用const定义数组的情况 const arr = [] arr.push ...
- DevExpress ASP.NET Core Controls 2019发展蓝图(No.5)
本文主要为大家介绍DevExpress ASP.NET Core Controls 2019年的官方发展蓝图,更多精彩内容欢迎持续收藏关注哦~ [DevExpress ASP.NET Controls ...
- hdu 6214 : Smallest Minimum Cut 【网络流】
题目链接 ISAP写法 #include <bits/stdc++.h> using namespace std; typedef long long LL; namespace Fast ...
- 移动端300ms兼容问题(移动端经典问题)
移动端300ms延迟原因 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌 ...
- 【rust】Rust变量绑定(3)
Rust 是一个静态类型语言,这意味着我们需要先确定我们需要的类型. 什么是变量绑定? 将一些值绑定到一个名字上,这样可以在之后使用他们. 如何声明一个绑定? 使用 let 关键字: fn main( ...
- Error:MySQLAdministrator无法连接到实例
Q:利用MySQLAdministrator登录时显示could not connect to the specific instance,使用ping指令后可以ping通,如下所示: A:这里能够p ...
- int转字符串 stringstream
1. 设定一个任意数字串,数出这个数中的偶数个数,奇数个数,及这个数中所包含的所有位数的总数,将答案按 “偶-奇-总” 的位序,排出得到新数.重复进行,最后会得到 123. #include<i ...