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 ...
随机推荐
- Codeforces Round #578 (Div. 2) C. Round Corridor (思维,数论)
题意: 有一个分两层的圆盘,每层从12点方向均分插入\(n\)和\(m\)个隔板,当内层和外层的隔板相连时是不能通过的,有\(q\)个询问,每次给你内层或外层的两个点,判断是否能从一个点走到另外一个点 ...
- 2015ACM/ICPC亚洲区沈阳站-重现赛 M - Meeting (特殊建边,最短路)
题意:有\(n\)个点,\(m\)个集合,集合\(E_i\)中的点都与集合中的其它点有一条边权为\(t_i\)的边,现在问第\(1\)个点和第\(n\)个点到某个点的路径最短,输出最短路径和目标点,如 ...
- Codeforces Round #644 (Div. 3) D. Buying Shovels (数学)
题意:商店里有\(k\)个包裹,第\(i\)个包裹中含有\(i\)个物品,现在想要买\(n\)物品,你可以选择某一个包裹购买任意次,使得物品数刚好等于\(n\),求最少的购买次数. 题解:首先,假如\ ...
- Codeforces Round #666 (Div. 2) C. Multiples of Length (贪心)
题意:给你一个由\(0,1,?\)组成的字符串,你可以将\(?\)任意改成\(0\)或\(1\),问你操作后能否使得该字符串的任意长度为\(k\)的区间中的\(0\)和$1的个数相等. 题解:我们首先 ...
- CF1465-C. Peaceful Rooks
CF1465-C. Peaceful Rooks 预备小知识: Rook(国际象棋中的车). 国际象棋中的棋子.每人有2个,他只能直走,不能斜走,除王车易位外不能越子. -- 来自<百度百科&g ...
- 7A - Kalevitch and Chess
A. Kalevitch and Chess time limit per test 2 seconds memory limit per test 64 megabytes input standa ...
- 痞子衡嵌入式:超级下载算法(RT-UFL)开发笔记(3) - 统一FlexSPI驱动访问
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是超级下载算法开发笔记(3)之统一FlexSPI驱动访问. 文接上篇 <超级下载算法(RT-UFL)开发笔记(2) - 识别当前i. ...
- MAC地址分类
网卡MAC地址作为互联网设备在以太网中身份的唯一标识在以太网通讯中的作用比IP地址还要重要,MAC地址分成两部分,前24位是组织唯一标识符(OUI, Organizationally unique i ...
- Chrome 黑科技
Chrome 黑科技 秒变记事本 data:text/html, <htmlcontenteditable> OK <a href="data:text/html, &qu ...
- CSS3 & Flex Layout All In One
CSS3 & Flex Layout All In One demos https://www.cnblogs.com/xgqfrms/p/10769302.html .flex-contai ...