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表功能 ...
随机推荐
- 安卓开发笔记(十二):SQLite数据库储存(上)
SQLite数据库存储(上) 创建数据库 Android专门提供了一个 SQLiteOpenHelper帮助类对数据库进行创建和升级 SQLiteOpenHelper需要创建一个自己的帮助类去继承它并 ...
- SQL Server 查找统计信息的采样时间与采样比例
有时候我们会遇到,由于统计信息不准确导致优化器生成了一个错误的执行计划(或者这样表达:一个较差的执行计划),从而引起了系统性能问题.那么如果我们怀疑这个错误的执行计划是由于统计信息不准确引起的.那么我 ...
- Implement heap using Java
public class HeapImpl { private int CAPACITY = 10; private int size = 0; private int[] data; public ...
- 缓存穿透,缓存雪崩,热点key及解决办法
1.穿透 穿透:频繁查询一个不存在的数据,由于缓存不命中,每次都要查询持久层.从而失去缓存的意义. 解决办法: 持久层查询不到就缓存空结果,查询时先判断缓存中是否exists(key) ,如果有直接返 ...
- 关于.Net mvc 项目在本地vs运行响应时间过长无法访问时,解决方法!
最近可能是刚升级了电脑使用了window10操作系统,总是遇到了一些以前没有遇到过的事情! 今早来到公司本来准备写bug的,但是当我打开vs运行的时候发现今天的电脑响应的时间明显的要比之前打开网页调试 ...
- Python存储系统(Memcached)
Memcached是一个自由开源的,高性能,分布式内存对象缓存系统. 本质上,它是一个简洁的key-value存储系统. 其主要用途有:动态数据库缓存.不同应用(语言)中共享数据 安装 安装及命令介绍 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十二║Vue实战:个人博客第一版(axios+router)
前言 今天正式开始写代码了,之前铺垫了很多了,包括 6 篇基础文章,一篇正式环境搭建,就是为了今天做准备,想温习的小伙伴可以再看看<Vue 基础入门+详细的环境搭建>,内容很多,这里就暂时 ...
- logisim元件清单
- Elasticsearch Index模块
1. Index Setting(索引设置) 每个索引都可以设置索引级别.可选值有: static :只能在索引创建的时候,或者在一个关闭的索引上设置 dynamic:可以动态设置 1.1. S ...
- WelcomeActivity【欢迎界面】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 简单记录下欢迎界面的布局以及倒计时和跳过功能. 效果图 代码分析 1.修改APP整个主题为无标题栏样式:styles.xml文件 & ...