前端 vue表格数据导出Excel 文件实现
实现思路
使用json2csv将后台json数据转化为csv格式数据
- 采用创建Blob(二进制大对象)的方式来存放缓存数据; 生成下载链接;
创建一个a标签,设置href和download属性
触发a标签的点击事件实现下载
实现如下:
表格为 <Table :columns="columns" :data="listdata"></Table>
假设数据格式如下: (实现子集数据也可导出成一条数据)
listdata: [{AreaName: '区域1',ProjectManager: '小丽',ProjectName:'区域1项目',money: 6666,
children:{AreaName: '区域1',ProjectManager: '小1',ProjectName:'项目1',money: 1236,}}, // 当存在子集数据时
{AreaName: '区域2',ProjectManager: '小红',ProjectName:'区域2项目',money: 8866}],
columns: [{title: '所属区域',key: 'AreaName'},{title: '负责人',key: 'ProjectManager'},{title: '项目名称',key: 'ProjectName'},{title: '金额',key: 'money'}],
实现代码:
// 先将子集数据处理为第一层级数据
ListDataSplit (listData, newData) {
listData.map((item, index) => {
if (item.children && item.children.length) {
newData.push(item)
this.ListDataSplit(item.children, newData)
} else {
newData.push(item)
}
})
},
// 导出
export () {
// 导出方法
exportFn (listdata, columns) {
let Parser = require('json2csv').Parser
let fields = []
columns.map(col => {
if (col.title && col.key) {
let obj = {
label: col.title, // 表头名称
value: col.key // 表取值字段key
}
fields.push(obj)
}
})
let fileName = '表格数据导出_' + new Date().toLocaleString('zh-CN')
let json2csvParser = new Parser({fields})
let result = json2csvParser.parse(listdata)
let blob = new Blob(['\ufeff' + result], {type: 'text/csv'})
let a = document.createElement('a')
a.setAttribute('href', URL.createObjectURL(blob))
a.setAttribute('download', `${fileName}.csv`)
a.click()
},
前端 vue表格数据导出Excel 文件实现的更多相关文章
- 将页面中表格数据导出excel格式的文件(vue)
近期由于项目需要,需要将页面中的表格数据导出excel格式的文件,折腾了许久,在网上各种百度,虽然资料不少,但是大都不全,踩了许多坑,总算是皇天不负有心人,最后圆满解决了. 1.安装相关依赖(npm安 ...
- JavaScript 上万条数据 导出Excel文件(改装版)
最近项目要js实现将数据导出excel文件,网上很多插件实现~~那个开心呀,谁知道后面数据量达到上万条时出问题:浏览器不仅卡死,导出的excel文件一直提示网络失败.... debug调试发现var ...
- JavaScript 上万条数据 导出Excel文件 页面卡死
最近项目要js实现将数据导出excel文件,网上很多插件实现~~那个开心呀,谁知道后面数据量达到上万条时出问题:浏览器不仅卡死,导出的excel文件一直提示网络失败.... debug调试发现var ...
- 导出网页表格数据为Excel文件的前端解决方案
在工作中,我们有时会遇到这样的需求,比如:要把页面的表格数据导出为Excel文件.在此记录下自己用的解决方法.代码如下: function tableToExcel(data){ //要导出的数据,t ...
- Vue+element UI实现表格数据导出Excel组件
介绍 这是一个可以将页面中的表格数据导出为Excel文件的功能组件,该组件一般与表格一起使用,将表格数据传给组件,然后通过点击组件按钮可将表格中的数据导出成Excel文件. 使用方法 由于封装该组件内 ...
- 纯前端实现数据导出excel文件
一 安装依赖 npm install -S file-saver xlsx npm install -D script-loader 二 新建文件夹 在网上百度引入即可 三 在main.js中引入 ...
- 导出jqgrid表格数据为EXCEL文件,通过tableExport.js插件。
今天公司项目需要做个导出功能,将jqgrid查询出的数据导出为EXCEL表格文件,期间遇到两个问题: 1.导出报错 uncaught exception: INVALID_CHARACTER_ERR: ...
- 前端表格数据导出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 ...
随机推荐
- cup缓存基础知识
目录 cup缓存 缓存结构 直接映射缓存 cup缓存 CPU缓存(CPU Cache)的目的是为了提高访问内存(RAM)的效率,这虽然已经涉及到硬件的领域,但它仍然与我们息息相关,了解了它的一些原理, ...
- rust里的内存对齐
内存对齐主要遵循下面三个原则: 结构体变量的起始地址能够被其最宽的成员大小整除 结构体每个成员相对于起始地址的偏移能够被其自身大小整除,如果不能则在前一个成员后面补充字节 结构体总体大小能够被最宽的成 ...
- 20220722-Java可变参数
Java可变参数总结 来源:B站韩顺平老师的Java入门教学 代码示例如下: public void f(String str,int... nums){ 方法体; } 代码示例如下: public ...
- 使用Python3.7结合Redisearch代替ElasticSearch实现的全文检索功能服务
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_105 "检索"是很多产品中无法绕开的一个功能模块,当数据量小的时候可以使用模糊查询等操作凑合一下,但是当面临海 ...
- WebGPU 导入[2] - 核心概念与重要机制解读
目录 1. 核心概念 ① 适配器和设备 ② 缓冲.纹理.采样器 ③ 绑定组 ④ 着色器与管线 ⑤ 编码器与队列 2. 重要机制 ① 缓冲映射机制 ② 时间线 1. 核心概念 这部分不会详细展开,以后写 ...
- Golang 汇编asm语言基础学习
Golang 汇编asm语言基础学习 一.CPU 基础知识 cpu 内部结构 cpu 内部主要是由寄存器.控制器.运算器和时钟四个部分组成. 寄存器:用来暂时存放指令.数据等对象.它是一个更快的内存. ...
- Python 爬取汽车之家口碑数据
本文仅供学习交流使用,如侵立删!联系方式见文末 汽车之家口碑数据 2021.8.3 更新 增加用户信息参数.认证车辆信息等 2021.3.24 更新 更新最新数据接口 2020.12.25 更新 添加 ...
- Mybatis完整版详解
一.简介 1.什么是MyBatis MyBatis 是一款优秀的持久层框架 它支持自定义 SQL.存储过程以及高级映射. MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作 ...
- mysql 8.0.28 查询语句执行顺序实测结果
TL;NRs 根据实测结果,MySQL8.0.28 中 SQL 语句的执行顺序为: (8) SELECT (5) DISTINCT <select_list> (1) FROM <l ...
- 七分钟学会 HTML 网页制作
什么是HTML 点击打开视频讲解更加详细 Hyper Text Markup Language(超文本标记语言) 标签控制排版 体积小,方便传输 编写HTLML 推荐使用:VS Code <!D ...