【vue】JSON数据导出excel

前言
导出方式有很多种,但是若只需要数据导出成.xlsx文件并下载的话,只用xlsx一个插件就行
目标

1 实现数据导出excel
2 如何设置表格列宽
3 如何在文件中创建工作表


准备工作

1 安装

npm i xlsx -S

2 引入

npm i xlsx -S

二、导出excel

创建文件

const wb = XLSX.utils.book_new(); // 创建文件

将数据和表头转换为工作表

const ws = XLSX.utils.aoa_to_sheet([header,...list||[]]); 

创建工作表,并将数据和表头填充到工作表中

XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); // 工作表名Sheet

写入文件并设置文件名

XLSX.writeFile(wb, bookTitle + ".xlsx", { bookType: "xlsx",type: "buffer"}); // 保存为Excel文件

AOA方式导出

    exportAOAToExcel() {// 表中数据const list = [["2016-05-03", "Tom", "No. 189, Grove St, Los Angeles"],["2016-05-03", "1", "No. 189, Grove St, Los Angeles"],["2016-05-03", "2", "No. 189, Grove St, Los Angeles"],["2016-05-03", "3", "No. 189, Grove St, Los Angeles"],];const header = ["日期", "姓名", "地址"]; // 自定义的表头数组const wb = XLSX.utils.book_new(); // 创建文件const ws = XLSX.utils.aoa_to_sheet([header,...list||[]]); // 将数据和表头转换为工作表XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); // 工作表Sheet1XLSX.writeFile(wb , Date.now()+".xlsx", { bookType: "xlsx", type: "buffer" }); // 保存为Excel文件},

JSON方式导出

 exportJSONToExcel(){const list = [{date:'2016-05-03',name:'1',address:'No. 1, Grove St, Los Angeles'},{date:'2016-05-03',name:'2',address:'No. 2, Grove St, Los Angeles'},{date:'2016-05-03',name:'3',address:'No. 3, Grove St, Los Angeles'},{date:'2016-05-03',name:'4',address:'No. 4, Grove St, Los Angeles'},];const header = ["日期", "姓名", "地址"]; // 自定义的表头数组const dataForExcel = list.map((item) => ({'日期': item.date,'姓名': item.name,'地址': item.address,}));const wb = XLSX.utils.book_new();const ws = XLSX.utils.json_to_sheet(dataForExcel, {header: header}); // 将数据和表头转换为工作表XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');XLSX.writeFile(wb,Date.now()  +".xlsx", { bookType: "xlsx", type: "buffer" }); // 保存为Excel文件}

效果在这里插入图片描述
实现一个文件中两个工作表,列表的宽度固定,文件的名称

exportToExcel(header, list, title, sheet, wch) {const bookTitle =title ||this.getCurrentTime(1).replace(/-/g, "").replace(/:/g, "").replace(" ", "");const wb = XLSX.utils.book_new();sheet.forEach((item, index) => {const ws = XLSX.utils.aoa_to_sheet([header, ...(list[index] || [])]); // 将数据和表头转换为工作表if (wch.length > 0) {ws["!cols"] = wch; // 设置列宽//   ws["!cols"] = ws["!cols"];}XLSX.utils.book_append_sheet(wb, ws, item || "Sheet1");});XLSX.writeFile(wb, bookTitle + ".xlsx", {bookType: "xlsx",type: "buffer",}); // 保存为Excel文件},exportSheet() {const header = ["姓名", "年龄"];const list = [[["张三", 24],["李四", 24],],[["王五", 24],["李四", 24],],];const wch = [{ wch: 10 }, { wch: 30}]; // 设置列宽const sheet = ["一班", "二班"];const title = "学校";this.exportToExcel(header, list, title, sheet, wch);},

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/868710.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode 算法:腐烂的橘子 c++

原题链接🔗:腐烂的橘子 难度:中等⭐️⭐️ 题目 在给定的 m x n 网格 grid 中,每个单元格可以有以下三个值之一: 值 0 代表空单元格;值 1 代表新鲜橘子;值 2 代表腐烂的橘子。 每分钟&#…

选择适合的220V转5V电源芯片,220V转5V非隔离降压电源ic

#### 问题: 在设计一个需要将220V交流电转换为5V直流电的电路时,我应该选择哪种型号的电源芯片?我需要输出电流在200mA以内,有没有推荐的型号? #### 答案: 在220V交流电转换为5V直流电的应用中&#xff0c…

【Spring Boot】Spring AOP中的环绕通知

目录 一、什么是AOP?二、AOP 的环绕通知2.1 切点以及切点表达式2.2 连接点2.3 通知(Advice)2.4 切面(Aspect)2.5 不同通知类型的区别2.5.1 正常情况下2.5.2异常情况下 2.6 统一管理切点PointCut 一、什么是AOP? Aspect Oriented Programming&#xff…

STM32学习历程(day5)

EXTI外部中断 中断 中断就是在主程序运行过程中 出现了特定的中断触发条件(中断源),CPU会暂停当前的程序,去处理中断程序 处理完会返回被暂停的位置 继续运行原来的程序。 中断优先级 当有多个中断源同时申请中断时 CPU会根据…

【面试八股总结】线程基本概念,线程、进程和协程区别,线程实现

一、什么是线程? 线程是“轻量级进程”,是进程中的⼀个实体,是程序执⾏的最小单元,也是被系统独立调度和分配的基本单位。 线程是进程当中的⼀条执行流程,同⼀个进程内多个线程之间可以共享代码段、数据段、打开的文件…

王老师 linux c++ 通信架构 笔记(二)配置服务器为固定的 ip 地址、远程登录、安装 gcc g++ 与虚拟机文件夹共享

(7)本条目开始配置 linux 的固定 ip 地址,以作为服务器使用: 首先解释 linux 的网口编号: linux 命令 cd : change directory 改变目录。 ls : list 列出某目录下的文件 根目录文件名 / etc &a…

JAVA基础-----final关键字

一、前言 final关键字的含义: final在Java中是一个保留的关键字,可以声明成员变量、方法、类以及本地变量。一旦你用final修饰,你将不能改变被修饰的代码,编译器会检查代码,如果你试图将变量再次初始化的话&#xff0…

I 2U-Net:具有丰富信息交互的双路径 U-Net 用于医学图像分割| 文献速递-基于深度学习的多模态数据分析与生存分析

Title 题目 I 2U-Net: A dual-path U-Net with rich information interaction for medical image segmentation I 2U-Net:具有丰富信息交互的双路径 U-Net 用于医学图像分割 01 文献速递介绍 在计算机视觉领域,医学图像分割是一个主要挑战&#xff…

【IMU】 椭球拟合标定加计Bias、Scale

椭球拟合简介 MESE IMU中,x,y,z轴的度量单位并不相同,假设各轴之间相互直。 加计静止状态(也就是只受重力的状态下),各个姿态只受重力的,x,y,z轴值(假设x,y,z轴相互垂直并且度量单…

TCP的p2p网络模式

TCP的p2p网络模式 1、tcp连接的状态有以下11种 CLOSED:关闭状态LISTEN:服务端状态,等待客户端发起连接请求SYN_SENT:客户端已发送同步连接请求,等待服务端相应SYN_RECEIVED:服务器收到客户端的SYN请请求&…

EPICS数据库示例

本文目标是使用EPICS数据库示例帮助新手理解如何使用不同的示例。 1、使用seq和mbbo的简单选择器 这个简单示例展示了如何使用一个mbbo和一个seq来旋转哪个值将被设置到一个PV。 # 这个mbbo记录将选择将运行seq的哪段 record(mbbo, "CHOOSE") {field(VAL, "…

ArcGIS中国工具(ArcGISCTools)等插件使用体验

ArcGIS中国工具(ArcGISCTools)的主要功能 1. 接合图表生成 这个功能允许用户生成标准分幅图的行政区边框注记,并在打印时自动加入。这对于需要制作标准地图的用户非常实用。 2. 图框工具 图框工具可以帮助用户创建和管理地图的图框&#…

Qt creator 控件转到槽 报错 The class containing “Ui:Dialog“ could not be found in

今天调试程序,发现主界面控件转到槽,报错如下图: 问题表现为:只有主窗口控件有这个错误,其他子窗口正常。 解决: 在网上搜这个报错信息,都没有一个很好的解决办法。 最后发现是我在子窗口中要…

Java根据经纬度获取两点之间的距离

Java根据经纬度获取两点之间的距离,最近在实现类似于钉钉打卡签到的需求,因为对精度要求不是很高,所以可以通过一个球面距离的公式来求两点距离,这里将地球当成一个球体,实际上地球是一个不规则的球体,所以…

C++继承(一文说懂)

目录 一: 🔥继承的概念及定义1.1 继承的概念1.2 继承定义1.2.1 定义格式1.2.2 继承关系和访问限定符1.2.3 继承基类成员访问方式的变化 二:🔥基类和派生类对象赋值转换三:🔥继承中的作用域四:&a…

DHCP与TCP的简单解析

目录 一、DHCP 1.1 DHCP概述 1.2 DHCP的优势 1.3 DHCP的模式与分配方式***** 1.3.1 DHCP的模式:C/S模式(客户机与服务器模式) 1.3.2 DHCP的分配方式 1.4 DHCP的租约过程及原理 1.4.1 DHCP的工作原理***** 1.4.2 更新租约原理***** …

高考志愿怎么选专业,哪些是热门专业?

选专业看上去非常简单,但是真正做起来的时候确实不容易,因为对于很多结束高考的学生来说,选专业就意味着他们选择自己的未来,这可是直接关系到未来的学习和职业发展,关系到将来的就业方向,再加上现在的社会…

近红外光谱脑功能成像(fNIRS):2.实验设计、指标计算与多重比较

一、实验设计的策略与方法 近红外光谱成像(INIRS)作为一种非侵入性脑功能成像技术,为研究大脑活动提供了一种高效、生态效度高的方法。然而,为了充分利用INIRS技术并确保实验结果的准确性和可靠性,研究者必须精心设计实…

基于stm32开发的红外循迹小车

本项目算是接触32来开发的第一个小项目了,虽然前期用51写过一个循迹小车,以为直接转到32会比较简单,结果还是花了大几天才把小车的参数完全调完,以此来记录下自己的学习历程(注:循迹算法并未加入PID算法&am…

spring boot集成easypoi导出word换行处理

项目场景&#xff1a; spring boot集成easypoi导出word <dependency><groupId>cn.afterturn</groupId><artifactId>easypoi-spring-boot-starter</artifactId><version>4.4.0</version> </dependency> 问题描述 spring boo…