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 ...
随机推荐
- Hyperbase数据迁移
原老集群有100台服务器,新增90台服务器和原来的服务器构成新Hyperbase集群最初考虑有两种方案distcp和snapshot,由于distcp进行数据迁移时不在HBase本身控制范围内,故选用 ...
- Java-Swing的JFrame的一些插件使用详解
JFrame介绍: 在 JFrame 对象中可以使用add方法添加 AWT 或者 Swing 组件. JFrame 有一个 Content Pane,窗口能显示的所有组件都是添加在这个 Content ...
- B - 来找一找吧 HihoCoder - 1701
题目: 这次到渣渣问桶桶了... 准备给你n个数a1, a2, ... an,桶桶你能从中找出m个特别的整数吗,我想让任意两个之差都是k的倍数. 请你计算有多少种不同的选法.由于选法可能非常多,你只需 ...
- Codeforces Round #515 (Div. 3) B. Heaters (贪心)
题意:有\(n\)个桩子,\(1\)表示该位置有一个火炉,可以使两边距离为\(r\)的范围照亮,问最少使用多少炉子使得所有范围都被照亮. 题解:贪心,首先我们从\(r\)位置开始向左找,如果找到了就记 ...
- 说说Golang goroutine并发那些事儿
摘要:今天我们一起盘点一下Golang并发那些事儿. Golang.Golang.Golang 真的够浪,今天我们一起盘点一下Golang并发那些事儿,准确来说是goroutine,关于多线程并发,咱 ...
- Leetcode(22)-括号生成
给出 n 代表生成括号的对数,请你写出一个函数,使其能够生成所有可能的并且有效的括号组合. 例如,给出 n = 3,生成结果为: [ "((()))", "(()())& ...
- mybaits(十)mybatis常见面试
面试题总结 1.MyBatis 解决了什么问题? 或:为什么要用 MyBatis? 或:MyBatis 的核心特性? 1)资源管理(底层对象封装和支持数据源) 2)结果集自动映射 3)SQL 与代 ...
- 2019牛客多校第一场I Points Division(DP)题解
题意: n个点,分成两组A,B,如果点i在A中,那么贡献值\(a_i\),反之为\(b_i\). 现要求任意\(i \in A,j \in B\)不存在 \(x_i >= x_j\) 且 \(y ...
- gradle中的build script详解
目录 简介 project和task 一个例子 task详细讲解 task脚本 task依赖 动态task 默认task build script的外部依赖 gradle中的build script详 ...
- Linux 驱动框架---dm9000分析
前面学习了下Linux下的网络设备驱动程序的框架inux 驱动框架---net驱动框架,感觉知道了一个机器的大致结构还是不太清楚具体的细节处是怎么处理的,所以今天就来以dm9000这个网上教程最多的驱 ...