vue导出数据excel
- 下载两个依赖
npm install file-save xlsx
创建两个文件
Blob.js
与Export2Excel.js
参考地址:文件地址
在
Export2Excel.js
中修改引入地址,注意地址的路径,没有script-loader依赖的话就去npm install script-loader -D
下载该依赖
在vue文件中使用
引入文件:
import {
export_json_to_excel
} from '@/plugins/Export2Excel'
点击按钮时导出文件
<a-button @click="exportExcel">导出</a-button>
exportExcel() {
const excelHeader = this.columns.map(item => item.title)
const keys = this.columns.map(item => item.dataIndex)
const excelData = this.dataSource.map(item => keys.map(i => item[i] || ''))
const excelName='人员信息表'
export_json_to_excel(excelHeader, excelData, excelName)
},
对于export_json_to_excel()中几个变量的解释
excelHeader为导出数据的表头
excelHeader=['年龄','性别','姓名']
excelData为导出的数据
excelData=[
[16,'男','tom'],
[17,'男','jim'],
[12,'男','jon'],
[16,'男','king']
]
//数据的顺序与表头一致
excelName:表的名字
vue导出数据excel的更多相关文章
- 导出数据excel表--身份证号后三位是0--〉还原
导出数据excel表的身份证号后三位是0,怎么办? 数据导出前,在身份证号前加任意符号即可 例如: 结果
- PB导出数据excel格式dw2xls
PB导出数据excel格式dw2xls 使用DW2XLS控件 语法 uf_save_dw_as_excel ( dw, filename ) 參数 dw A reference to the data ...
- java导出数据EXCEL的工具类(以spring-webmvc-4.0.4jar为基础)
1.本工具类继承于 spring-webmvc-4.0.4jar文件心中的一个类 AbstractExcelView 2.代码如下 package com.skjd.util; import j ...
- 用MYSQLworkbench导出数据excel
步骤: 1.先从数据库中将表导出,右键需要导出的表格——>Table Data Export Wizard 2.点击Next,选择你需要把数据存放的文件路径.导出的数据格式(表格的话就默认选择C ...
- Excel导出数据Excel.Application组件权限设置方法
很多网络应用系统都会涉及到数据采用Excel方式导出的模块,部分朋友问我到底怎么弄,其实方式很多种,目前比较优秀的方式还是直接用Excel的Excel.Application方式比较合适. 采用Exc ...
- java导出数据Excel总结
//创建获取到JFileChooser的文件名的JTextField public JTextField getTextField(Container c){ JTextField textField ...
- 【js-xlsx和file-saver插件】前端导出数据到excel
最近在做项目,前端进行处理数据,导出excel中,还是遇到不少问题,这里将其进行总结一下,博主是vue框架开发,借用file-saver和xlsx插件进行导出excel,我们来看下代码和效果.地址链接 ...
- vue中把table导出表格excel
1.首先下载2个js,我的百度网盘有 2.安装依赖 npm install -S file-saver xlsx(这里其实安装了2个依赖) npm install -D script-loader 3 ...
- vue 导出excel表格
对于涉及到数据比较多的管理后台导出excel 表格这个需求就非常的常见了 所以? vue 怎么到处excel表格的? 有两种办法 1:请求接口后台直接给你的是excel文件,你需要做的就是怎么接收ex ...
随机推荐
- H - 看病要排队
看病要排队这个是地球人都知道的常识.不过经过细心的0068的观察,他发现了医院里排队还是有讲究的.0068所去的医院有三个医生(汗,这么少)同时看病.而看病的人病情有轻重,所以不能根据简单的先来先服务 ...
- Gym - 102861B 、Gym - 102861F、Gym 102861G、Gym 102861L、Gym 102861N、Gym 101968C、Gym 101968D
训练赛链接:https://vjudge.net/contest/410049#problem/D Gym - 102861B 题意: 在一个二维平面上,给你一个船,问你在这个二维平面上有没有船重叠. ...
- 【2020杭电多校】 Lead of Wisdom、The Oculus
题目链接:Lead of Wisdom 题意:有n个物品,这些物品有k种类型.每种物品有对应的类型ti,其他值ai,bi,ci,di 你可以选择一些物品,但是这些物品要保证它们任意两者之间类型不能相同 ...
- FZU1894 志愿者选拔
Problem Description 世博会马上就要开幕了,福州大学组织了一次志愿者选拔活动.参加志愿者选拔的同学们排队接受面试官们的面试.参加面试的同学们按照先来先面试并且先结束的原则接受面试官们 ...
- Codeforces Round #691 (Div. 2) C. Row GCD (数学)
题意:给你两个数组\(a\)和\(b\),对于\(j=1,...,m\),找出\(a_1+b_j,...,a_n+b_j\)的\(gcd\). 题解:我们很容易的得出\(gcd\)的一个性质:\(gc ...
- 使用eclipse搭建第一个java web应用
一. 首先是eclipse得下载,你要下载Eclipse IDE for Java EE这种类型的,我之前下载的Eclipse IDE for Enterprise Java Developers是官 ...
- UVA 796 - Critical Links 无向图字典序输出桥
题目:传送门 题意:给你一个无向图,你需要找出里面的桥,并把所有桥按字典序输出 这一道题就是用无向图求桥的模板就可以了. 我一直错就是因为我在输入路径的时候少考虑一点 错误代码+原因: 1 #incl ...
- kafka消息队列、环境搭建与使用(.net framework)
一:kafka介绍 kafka(官网地址:http://kafka.apache.org)是一种高吞吐量的分布式发布订阅的消息队列系统,具有高性能和高吞吐率. 1.1 术语介绍 BrokerKafka ...
- BKDR字符串哈希
BKDR字符串哈希 bkdrhash冲突的可能性非常小,但是由于\(hash\)值非常大不能映射到哈希数组地址上,所以可以通过取余,用余数作为索引地址.但这样做造成了可能的地址冲突. #include ...
- JVM实战篇
1.1 JVM参数 1.1.1 标准参数 -version -help -server -cp 1.1.2 -X参数 非标准参数,也就是在JDK各个版本中可能会变动 -Xint 解释执行 -Xcomp ...