【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,一经查实,立即删除!

相关文章

Windows总结

windows安装 Windows分类 旗舰版 不完整专业版 不完整服务器版 完整安装步骤 拔网线安装Windows系统 备份下载安装镜像制作启动U盘 推荐用大白菜加入BIOS系统设置为U盘启动优先重装Windows系统 U盘安装光盘安装 优点:一对一安装简单缺点:大量安装非常浪费…

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

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

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

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

解析 pdfminer layout.py LAParams类及其应用实例

解析 pdfminer layout.py LAParams类及其应用实例 引言类的定义1. line_overlap2. char_margin3. word_margin4. line_margin5. boxes_flow6. detect_vertical7. all_texts 类的初始化参数验证类的表示总结 引言 在这篇文章中,我们将解析一个叫做 LAParams 的类。这…

Lumen 9/10 版本中使用 Laravel Lang

安装 composer require --dev laravel-lang/common:^4.1注册/加载 方式一(推荐) bootstrap/app.php 中取消注释 $app->register(App\Providers\AppServiceProvider::class); app/Providers/AppServiceProvider.php 的 register 方法中添加&#x…

[C++][ProtoBuf][Proto3语法][一]详细讲解

目录 1.字段规则2.消息类型的定义与使用1.定义2.使用 3.enum类型1.语法2.定义时注意3.代码 1.字段规则 消息的字段可以⽤下⾯⼏种规则来修饰: singular:消息中可以包含该字段零次或⼀次(不超过⼀次) proto3语法中,字段默认使⽤该规则 repeat…

从入门到精通:网络基础详解

前言 在现代社会,网络技术已经成为我们日常生活和工作中不可或缺的一部分。从简单的网页浏览到复杂的分布式系统,网络技术都扮演着至关重要的角色。通过这篇文章,读者将从入门到精通,全面掌握网络编程的理论和实践。 重点摘要 …

【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…

if语句如果侧边栏没有值就填满,否则为width: 180px

要实现这个逻辑&#xff0c;我们可以使用JavaScript&#xff08;配合CSS&#xff09;来根据侧边栏&#xff08;我们假设是一个具有特定ID或类的DOM元素&#xff09;的内容或值来决定其宽度。 HTML 假设你的侧边栏有一个ID为sidebar&#xff1a; <div id"sidebar&quo…

STM32学习历程(day5)

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

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

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

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

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

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

一、前言 final关键字的含义&#xff1a; final在Java中是一个保留的关键字&#xff0c;可以声明成员变量、方法、类以及本地变量。一旦你用final修饰&#xff0c;你将不能改变被修饰的代码&#xff0c;编译器会检查代码&#xff0c;如果你试图将变量再次初始化的话&#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&#xff1a;具有丰富信息交互的双路径 U-Net 用于医学图像分割 01 文献速递介绍 在计算机视觉领域&#xff0c;医学图像分割是一个主要挑战&#xff…

用python画一个爱心

1 问题 Python是一种常见的计算机编程语言&#xff0c;如何用python简单的画一个爱心呢&#xff1f; 2 方法 利用turtle库以及简单规范代码将爱心画出。 代码清单 1 from turtle import *pensize(1)pencolor(red)fillcolor(pink)speed(5)up()goto(-30,100)down()begin_fill()l…

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

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

TCP的p2p网络模式

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

Qt QChart 图表库详解及使用

文章目录 Qt QChart 图表库详解及使用一、Qt Charts 概述二、安装 Qt Charts1. 在项目中添加 Qt Charts三、Qt Charts 的基本使用1. 创建一个简单的折线图2. 添加图例和自定义样式四、Qt Charts 的交互功能1. 启用缩放和平移2. 启用数据点选择五、Qt Charts 的高级特性1. 多轴绘…

EPICS数据库示例

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

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

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