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 #680 (Div. 2, based on Moscow Team Olympiad)【ABCD】
比赛链接:https://codeforces.com/contest/1445 A. Array Rearrangment 题意 给定两个大小均为 \(n\) 的升序数组 \(a\) 和 \(b\) ...
- 使用eclipse写第一个Java_web的hello_world项目
1.先创建一个Java_web项目 如果你没有下载过Tomcat服务器,不会配置,建议看一下我得这一篇博客:https://www.cnblogs.com/kongbursi-2292702937/p ...
- WIN7使用msg命令发送消息心得
昨天搞了一下午+一晚上,终于捣鼓出了一些奇奇怪怪的操作,成功发送了消息. 应实验要求,博主有幸在家里搞到了两台win7,其他的系统是不是这么操作就不太清楚了. 一开始实验指导书上是用net send发 ...
- Balanced Numbers SPOJ - BALNUM
代码+注释 1 //我感觉这道题最扯的就是我因为输入而TLE了半天,懵逼死了,想破脑袋也没想到因为输入TLE了半天 2 //题意:求区间内数字满足"奇数各数出现偶数次,偶数各数出现奇数次&q ...
- 大数据去重(data deduplication)方案
数据去重(data deduplication)是大数据领域司空见惯的问题了.除了统计UV等传统用法之外,去重的意义更在于消除不可靠数据源产生的脏数据--即重复上报数据或重复投递数据的影响,使计算产生 ...
- 手把手教你通过SQL注入盗取数据库信息
目录 数据库结构 注入示例 判断共有多少字段 判断字段显示位置 显示出登录用户和数据库名 查看所有数据库 获取对应数据库的表 获取对应表的字段名称 获取用户密码 SQL注入(SQL Injection ...
- c# xaml (1)
原文:https://www.wpf-tutorial.com/xaml/what-is-xaml/ vs2017 新建 wpf 项目,在解决方案里会自动创建MainWindow.xaml文件 1.新 ...
- React Hooks in depth
React Hooks in depth React Hooks https://reactjs.org/docs/hooks-rules.html https://www.npmjs.com/pac ...
- V8 & ECMAScript & ES-Next
V8 & ECMAScript & ES-Next ES6, ES7, ES8, ES9, ES10, ES11, ES2015, ES2016, ES2017, ES2018, ES ...
- TS & error
TS & error Function implementation is missing or not immediately following the declaration.ts ht ...