vue 导出xlsx表功能
详细步骤:
1.需要安装三个依赖:
npm install -S file-saver xlsx
npm install -D script-loader
两个命令行包含三个依赖。
2.项目中src下新建一个文件夹:
(vendor---名字任取) 下载:Blob.js和 Export2Excel.js
文件:链接: http://pan.baidu.com/s/1nvSdw85 密码: 5qhi
里面放置两个文件Blob.js和 Export2Excel.js。
3. 修改:Export2Excel.js:require('./Blob');
4.在build----webpack.base.conf.js中resolve的alias加入 'vendor': path.resolve(__dirname, '../src/vendor'),即可解决。alias是配置别名。
5.在.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]))
}
6.按钮导出调用export2Excel方法。
vue 导出xlsx表功能的更多相关文章
- 导出excel表功能
前台: <asp:Button ID="btndao" runat="server" Text="导出excel文件" onclic ...
- 前端 vue/react 或者 js 导入/导出 xlsx/xls (带样式)表格的功能
第一种导出表格的功能: yarn add xlsx script-loader file-saver xlsx-style 效果展示 xlsx-style的bug修复:node_module/xlsx ...
- 用NPOI实现导入导出csv、xls、xlsx数据功能
用NPOI实现导入导出csv.xls.xlsx数据功能 直接上代码 首先定义一个接口 如果需要直接操作文件的话,就自己在封装一次 然后定义csv类的具体实现 这个需要引入命名空间LumenWo ...
- vue+element UI如何导出excel表
导出excel表应按如下规则 首先要先安装如下依赖 npm install --save xlsx npm install --save file-saver 接下在在你的代码中去引用这两个 impo ...
- thinkphp导入导出excel表单数据
在PHP项目经常要导入导出Excel表单. 先去下载PHPExcel类库文件,放到相应位置. 我在thinkphp框架中的位置为ThinkPHP/Library/Org/Util/ 导入 在页面上传e ...
- 【Oracle 数据迁移】环境oracle 11gR2,exp无法导出空表的表结构【转载】
今天做数据迁移,但是发现有些空表无法exp,后来找到问题所在. [原文]:http://www.cnblogs.com/wenlong/p/3684230.html 11GR2中有个新特性,当表无数据 ...
- phpexcel导出成绩表
效果图如下: 代码如下:代码注释不全,请大家参考phpexcel中文帮助手册 <?php require_once 'PHPExcel.php'; function bfb($n) { retu ...
- 转 一个oracle11g 使用exp导出空表丢失的问题分析及解决办法
用exp无法导出空表解决方法 最早的一次使用oracle 11g导出数据发现有的表丢失了,感觉莫名其妙的,后来终于找到原因了. 找到问题以后,再看看解决方案.11GR2中有个新特性,当表无数据时,不分 ...
- 传参导出Excel表乱码问题解决方法
业务场景 先描述一下业务场景,要实现的功能是通过搜索框填写参数,然后点击按钮搜索数据,将搜索框的查询参数获取,附加在链接后面,调导Excel表接口,然后实现导出Excel功能.其实做导Excel表功能 ...
随机推荐
- d3实现家族树
1. jQuery和CSS3支持移动手机的DOM元素移动和缩放插件:panzoom 2.拖动:jqueryUI-Draggable.touchpunch 3.图表:echart.heig ...
- 得力D991CN Plus计算器评测(全程对比卡西欧fx-991CN X)
得力在2018年出了一款高仿卡西欧fx-991CN X中文版的计算器,型号为D991CN Plus,在实现同样功能的前提下,网销价格是卡西欧的三分之一左右.但是这款计算器与卡西欧正版计算器差距是大是小 ...
- Java转PHP的心路历程
首先,我要批评一下自己,已经好久没发博客了.总是拿奇奇怪怪的理由来妨碍自己写博客. emmmm,现在心里舒服一点了. 前提 在2018年的11月7号,我从广州跳槽到一个三线的小城市工作.跳槽原因比较羞 ...
- MySQL 表名和字段名不要使用保留字命名
今天测试代码,新建了一张 Order 表,使用的 MySQL 数据库. 插入数据的时候报语法错误,我检查了好几遍,也没看出 SQL 语句哪里有问题,于是从 MyBatis 的日志里拷贝出 SQL 语句 ...
- nginx解决反向代理超时
最近在公司windows服务器部署nginx前端项目时 因为业务需求 有个有个接口数据量很大,请求时长在很大可能超过一分钟 然后一直遇到了504 Gateway Time-out 在网上查了很多资料都 ...
- Python 闭包小记
闭包就是能够读取其他函数内部变量的函数.例如在javascript中,只有函数内部的子函数才能读取局部变量,所以闭包可以理解成“定义在一个函数内部的函数“.在本质上,闭包是将函数内部和函数外部连接起来 ...
- dotnet core开源博客系统XBlog介绍
XBlog是dotnet core平台下的个人博客开源系统,它只需要通过Copy的方式即可以部署到Linux和windows系统中:如果你有安全证书那只需要简单配置一下即可提供安全的Https服务.接 ...
- JavaScript夯实基础系列(三):this
在JavaScript中,函数的每次调用都会拥有一个执行上下文,通过this关键字指向该上下文.函数中的代码在函数定义时不会执行,只有在函数被调用时才执行.函数调用的方式有四种:作为函数调用.作为 ...
- qs.stringify和JSON.stringify的使用和区别
qs可通过npm install qs命令进行安装,是一个npm仓库所管理的包. 而qs.stringify()将对象 序列化成URL的形式,以&进行拼接. JSON是正常类型的JSON,请对 ...
- NodeJs之邮件(email)发送
NodeJs之邮件(email)发送 一,介绍与需求 1.1,介绍 1,Nodemailer简介 Nodemailer是一个简单易用的Node.js邮件发送插件 github地址 Nodemailer ...