将页面中表格数据导出excel格式的文件(vue)
近期由于项目需要,需要将页面中的表格数据导出excel格式的文件,折腾了许久,在网上各种百度,虽然资料不少,但是大都不全,踩了许多坑,总算是皇天不负有心人,最后圆满解决了。
1、安装相关依赖(npm安装可能会出现某些错误,可以使用cnpm):
npm install file-saver --save // 保存文件用
npm install xlsx --save // 转二进制用
npm install script-loader --save-dev // xlsx核心文件
2、下载两个核心js文件,Blob.js和 Export2Excel.js 下载地址:Blob.js和 Export2Excel.js文件
3、在src目录下新建vendor文件夹,将Blob.js和 Export2Excel.js放进去。
4、更改webpack.base.conf.js配置。
在resolve的alias里添加如下代码:
'vendor': path.resolve(__dirname, '../src/vendor')
5、在需要导出excel格式文件的页面中写入以下两个方法,如:
methods: {
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
},
export2Excel() {
const _this = this
require.ensure([], () => {
const { export_json_to_excel } = require('../vendor/Export2Excel');
const tHeader = ['ID', '封面', '小说名','二级分类','作者','进度','更新时间', '状态'];
const filterVal = ['novelId', 'imageUrl', 'title', 'categoryName', 'author', 'completeStatus', 'updateTime', 'status'];
const list = _this.dataList;
const data = _this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '小说列表');
})
}
}
注意:tHeader表示表头的标题,filterVal表示表头的字段名,可通过点击事件调用导出方法。
<button type="primary" @click="export2Excel">导出</button>
将页面中表格数据导出excel格式的文件(vue)的更多相关文章
- Vue2.0---将页面中表格数据导出excel
这不是教程,是随笔. 项目中将后台返回的数据v-for到表格中,然后需要将这个表格导出为EXCEL 只说怎么做. 一.需要安装三个依赖: npm install -S file-saver xlsx ...
- Vue+element UI实现表格数据导出Excel组件
介绍 这是一个可以将页面中的表格数据导出为Excel文件的功能组件,该组件一般与表格一起使用,将表格数据传给组件,然后通过点击组件按钮可将表格中的数据导出成Excel文件. 使用方法 由于封装该组件内 ...
- SQLYOG如何将数据导出excel格式
方法/步骤 如图,笔者的数据库中有一张student表,想把这张表中的数据导出成excel 在这张表上右击,选择“Export”,再选择“Export Table Data as CSV, ...
- 前端 vue表格数据导出Excel 文件实现
实现思路 使用json2csv将后台json数据转化为csv格式数据 采用创建Blob(二进制大对象)的方式来存放缓存数据: 生成下载链接: 创建一个a标签,设置href和download属性 触发a ...
- 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 ...
随机推荐
- 2018.12.18 bzoj2242: [SDOI2011]计算器(数论)
传送门 数论基础题. 对于第一种情况用快速幂,第二种用exgcdexgcdexgcd,第三种用bsgsbsgsbsgs 于是自己瞎yyyyyy了一个bsgsbsgsbsgs的板子(不知道是不是数据水了 ...
- SQL2008 2机镜像
清除设置 //删除端点 declare @sql varchar() declare @mirrName varchar() select @mirrName=name from sys.databa ...
- MySQL处理表字段小技巧
MySQL利用正则函数替换值 update dateTest set date=REPLACE(date,'/','') where date REGEXP '\/'; SQL语句讲解: -- 将 所 ...
- HTTP文件上传服务器-支持超大文件HTTP断点续传的实现办法
最近由于笔者所在的研发集团产品需要,需要支持高性能的大文件http上传,并且要求支持http断点续传.笔者在以前的博客如何实现支持大文件的高性能HTTP文件上传服务器已经介绍了实现大文件上传的一些基本 ...
- JDBC连接SQL Server数据库
测试环境 数据库:SQL Server 2008 R2,创建数据库名:TestDemo,表:User,字段如下: 字段 字段 id UName UPass sqljdbc.jar下载地址:依赖的J ...
- leaflet入门(二)GeoJson
GeoJson格式数据的形式 Using GeoJSON with Leaflet GeoJSON is becoming a very popular data format among many ...
- 1.6getId()方法
getId()方法的作用是取得线程的唯一标识. package com.cky.test; /** * Created by chenkaiyang on 2017/12/2. */ public c ...
- Java Applet小应用
开发和部署方式 嵌入到HTML网页中,用<Applet></Applet>标签识别.java环境用浏览器的,在第一次打开时下载,可开发成以后打开,默认不必再次下载.也可 ...
- Property attributes
There are many attributes for property as follows: atomic: Is default behavior will ensure the prese ...
- 3、利用GDB进行程序调试
本文将用一个实际例子讲解如何通过GDB进行程序调试. 首先,我们需要理解的是GDB是GNU开源组织发布的一个强大的UNIX下的程序调试工具,其产生和调试的目的是让调试者知道,程序在执行时内部发生了什么 ...