当前位置: 首页 > news >正文

使用JavaScript和XLSX.js将数据导出为Excel文件

目录

  • 一、安装XLSX.js
  • 二、将数据转换为Excel文件

导出数据是Web应用程序中常见的功能之一。在许多情况下,我们需要将数据导出为Excel文件,以便用户可以在本地计算机上查看和编辑数据。在本篇博客中,我们将介绍如何使用JavaScript和XLSX.js将数据导出为Excel文件。

XLSX.js是一个JavaScript库,它提供了一组API,可以将数据转换为Excel文件。该库支持多种数据源,包括数组、JSON对象和CSV文件。使用XLSX.js,我们可以轻松地将数据导出为Excel文件,并在Web应用程序中提供下载链接。

在本篇博客中,我们将介绍如何使用XLSX.js将数据导出为Excel文件。我们将从安装XLSX.js开始,然后介绍如何将数据转换为Excel文件,并提供一个完整的示例,以便您可以轻松地将其集成到您的Web应用程序中。

一、安装XLSX.js

XLSX.js 是一个 JavaScript 库,可用于在浏览器中读取和写入 Excel 文件。它支持各种 Excel 文件格式,包括 .xlsx、.xlsm、.xlsb 和 .xls。XLSX.js 可以在浏览器中直接使用,也可以在 Node.js 中使用。

使用 XLSX.js,你可以将数据导出到 Excel 文件中,或从 Excel 文件中导入数据。它还提供了许多功能,例如:

  • 解析 Excel 文件中的单元格
  • 处理 Excel 文件中的日期格式
  • 读取和写入 Excel 文件中的图表和图像

要使用XLSX.js,您需要将其添加到您的项目中。您可以通过npm安装XLSX.js,也可以直接从CDN中引入它。在本篇博客中,我们将使用CDN来安装XLSX.js。

您可以通过以下代码将XLSX.js添加到您的HTML文件中:

<script src="https://cdn.jsdelivr.net/npm/xlsx@0.17.0/dist/xlsx.full.min.js"></script>

上面的代码将从CDN中加载XLSX.js的最新版本。您可以将版本号更改为您需要的版本。现在,我们已经安装了XLSX.js,可以开始导出数据了。

二、将数据转换为Excel文件

要将数据导出为Excel文件,我们需要将其转换为XLSX.js支持的格式。XLSX.js支持多种数据格式,包括数组、JSON对象和CSV文件。在本篇博客中,我们将介绍如何将数组和JSON对象转换为Excel文件。

将数组转换为Excel文件

要将数组转换为Excel文件,我们需要使用XLSX.utils.aoa_to_sheet方法将数组转换为worksheet对象,然后将worksheet对象添加到workbook中。以下是将数组转换为Excel文件的完整代码示例:

import * as XLSX from "xlsx"
const tempData = [['John Doe', 30],['Jane Doe', 25],['Bob Smith', 40]
];// 将数组中的数据转换为一个包含两个属性的对象数组const exportData = this.tempData.map(item => {return {'Name': item[0],'Age': item[1]}// 将数据转换为 worksheet 对象
const worksheet = XLSX.utils.aoa_to_sheet(exportData);// 将 worksheet 对象添加到 workbook 中
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');// 导出 Excel 文件
XLSX.writeFile(workbook, 'data.xlsx');

在上面的代码中,我们定义了一个包含数据的二维数组tempData。然后,我们使用XLSX.utils.aoa_to_sheet方法将数据转换为worksheet对象。接下来,我们创建一个新的workbook对象,并使用XLSX.utils.book_append_sheet方法将worksheet对象添加到workbook中。最后,我们使用XLSX.writeFile方法将workbook导出为Excel文件,并将其保存到本地文件系统中。

如果需要将Excel文件设置尾没有表头,即构造的数据结构没有表头,需要将header选项被设置为0。

            // 构造要导出的数据结构,不需要表头const exportData = this.tempData.map(item => {return [item[0],item[1]]})// 将数据转换为 worksheet 对象const worksheet = XLSX.utils.aoa_to_sheet(exportData, { header: 0 });            // 将 worksheet 对象添加到 workbook 中const workbook = XLSX.utils.book_new();XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');// 导出 Excel 文件XLSX.writeFile(workbook, 'test_read.xlsx');

将JSON对象转换为Excel文件

要将JSON对象转换为Excel文件,我们需要使用XLSX.utils.json_to_sheet方法将JSON对象转换为worksheet对象,然后将worksheet对象添加到workbook中。以下是将JSON对象转换为Excel文件的完整代码示例:

const data = [{name: 'John Doe',age: 30,gender: 'Male'},{name: 'Jane Doe',age: 25,gender: 'Female'},{name: 'Bob Smith',age: 40,gender: 'Male'}
];// 将数据转换为 worksheet 对象
const worksheet = XLSX.utils.json_to_sheet(data);// 将 worksheet 对象添加到 workbook 中
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');// 导出 Excel 文件
XLSX.writeFile(workbook, 'data.xlsx');

在上面的代码中,我们定义了一个包含JSON对象的数组data。然后,我们使用XLSX.utils.json_to_sheet方法将JSON对象转换为worksheet对象。接下来,我们创建一个新的workbook对象,并使用XLSX.utils.book_append_sheet方法将worksheet对象添加到workbook中。最后,我们使用XLSX.writeFile方法将workbook导出为Excel文件,并将其保存到本地文件系统中。

相关文章:

使用JavaScript和XLSX.js将数据导出为Excel文件

目录 一、安装XLSX.js二、将数据转换为Excel文件 导出数据是Web应用程序中常见的功能之一。在许多情况下&#xff0c;我们需要将数据导出为Excel文件&#xff0c;以便用户可以在本地计算机上查看和编辑数据。在本篇博客中&#xff0c;我们将介绍如何使用JavaScript和XLSX.js将数…...

如何使用YOLOv8训练自己的模型

本文介绍如何用YOLO8训练自己的模型&#xff0c;我们开门见山&#xff0c;直接步入正题。 前言&#xff1a;用yolo8在自己的数据集上训练模型首先需要配置好YOLO8的环境&#xff0c;如果不会配置YOLO8环境可以参考本人主页的另一篇文章 提醒&#xff1a;使用GPU训练会大幅度加…...

机器学习-逻辑回归【手撕】

逻辑回归 在模式识别问题中&#xff0c;所输出的结果是分类&#xff0c;比如是否是猫&#xff0c;这时候无法通过简单的线性回归来实现问题。同时&#xff0c;与线性回归不同的是&#xff0c;逻辑回归是一种名为回归的线性分类器&#xff0c;并常用于二分类&#xff0c;其本质…...

内网安全:NTLM-Relay

目录 NTLM认证过程以及攻击面 NTLM Relay攻击 NTLM攻击总结 实验环境说明 域横向移动&#xff1a;NTLM中继攻击 攻击条件 实战一&#xff1a;NTLM中继攻击-CS转发上线MSF 原理示意图 一. CS代理转发 二. MSF架设路由 三. 适用smb_relay模块进行中继攻击 域横向移动…...

Tensorflow2.0笔记 - tensor的padding和tile

本笔记记录tensor的填充和tile操作&#xff0c;对应tf.pad和tf.tile import tensorflow as tf import numpy as nptf.__version__#pad做填充 # tf.pad( tensor,paddings, modeCONSTANT,nameNone) #1维tensor填充 tensor tf.random.uniform([5], maxval10, dtypetf.int32) pri…...

多媒体测试资源

目录 简介自己整理的文件测试资源列表 简介 音视频测试时,需要许多源文件,这里整理了一些.会持续更新.当然可以使用ffmpeg转换获得需要的文件. 如果知道的这方面资源的,在评论区留言. 自己整理的文件 有视频,图片,音频. 链接&#xff1a;https://pan.baidu.com/s/1vatLmWk…...

Wordpress seo优化该怎么做?

Wordpress作为开源管理系统&#xff0c;目前已然是世界上最流行的cms之一&#xff0c;这不仅仅因为他开源&#xff0c;对用户友好&#xff0c;让任何人都能轻而易举的制作网站&#xff0c;更是因为这套程序对于搜索引擎非常友好&#xff0c;是做谷歌seo的不二之选 Wordpress作为…...

Ultraleap 3Di示例Interactable Objects组件分析

该示例代码位置如下&#xff1a; 分析如下&#xff1a; Hover Enabled&#xff1a;悬停功能&#xff0c;手放在这个模型上&#xff0c;会触发我们手放在这个模型上的悬停功能。此时当手靠近模型的时候&#xff0c;手的模型的颜色会发生改变&#xff0c;反之&#xff0c;则不会…...

Vue自定义成功弹窗H5实现类似于小程序的效果

效果图&#xff1a; <div class"father"><div class"success-box" v-if"isSuccess"><img src"../../assets/insure/success-logo.png" alt""><span>{{ successTitle }}</span></div> &…...

Linux之父:我们正在从C语言转向Rust

最近&#xff0c;Linus在“Torvalds 演讲&#xff1a;人工智能对编程的影响”&#xff1a;“我们正在从C语言转向Rust”。 网友讨论&#xff1a; Linus 选择 Rust 是因为&#xff0c;这是一个中长期解决方案&#xff0c;解决了 IT 世界中缺乏 C/C 人员的实际问题&#xff0c;所…...

C++ qt标题栏组件绘制

本博文源于笔者在学习C qt制作的标题栏组件&#xff0c;主要包含了&#xff0c;最小化&#xff0c;最大化&#xff0c;关闭。读者在看到这篇博文的时候&#xff0c;可以直接查看如何使用的&#xff0c;会使用了&#xff0c;然后进行复制粘贴源码部分即可。 问题来源 想要制作…...

Mysql运维篇(三) MySQL备份与恢复

一路走来&#xff0c;所有遇到的人&#xff0c;帮助过我的、伤害过我的都是朋友&#xff0c;没有一个是敌人。如有侵权&#xff0c;请留言&#xff0c;我及时删除&#xff01; 一、物理备份与逻辑备份 1、物理备份&#xff1a;备份数据文件&#xff0c;转储数据库物理文件到某…...

数字图像处理(实践篇)二十七 Python-OpenCV 滑动条的使用

目录 1 涉及的函数 2 实践 1 涉及的函数 ⒈ setWindowProperty()用于设置GUI应用程序的属性 cv2.setWindowProperty(windowsName, prop_id, prop_value) 参数: ①...

拷贝构造函数的理解

1.拷贝构造函数与构造函数类似&#xff0c;当没有自定义拷贝构造函数的时候&#xff0c;编译器会定义一个拷贝构造函数。 当类对象没有初始化的时候&#xff0c;通过赋值运算符的形式&#xff0c;也是调用拷贝构造函数。 Test aa(100); Test bb aa;//调用拷贝构造函数Test …...

基于ncurse的floppy_bird小游戏

1. 需求分析 将运动分解为鸟的垂直运动和杆的左右运动。 2. 概要设计 2.1 鸟运动部分 2.2 杆的运动 3. 代码实现 #include <stdio.h> #include <ncurses.h>#include <stdlib.h> #include <time.h>int vx 0; int vy 1;int bird_r; int bird_c;int…...

创建第一个 Spring 项目(IDEA社区版)

文章目录 创建 Spring 项目创建一个普通的 Maven 项目添加 Spring 依赖IDEA更换国内源 运行第一个 Spring 项目新建启动类存储 Bean 对象将Bean注册到Spring 获取并使用 Bean 对象 创建 Spring 项目 创建一个普通的 Maven 项目 首先创建一个普通的 Maven 项目 添加 Spring 依…...

VUE3动漫影视视频网站模板源码

文章目录 1.视频设计来源1.1 主界面1.2 动漫、电视剧、电影视频界面1.3 播放视频界面1.4 娱乐前线新闻界面1.5 关于我们界面 2.效果和源码2.1 动态效果2.2 源码结构 源码下载 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/deta…...

Node.js-express

1.了解Ajax 1.1 什么是ajax Ajax的全称是Asynchronous Javascript And XML&#xff08;异步Js和XML&#xff09;. 通俗的理解&#xff1a;在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式&#xff0c;就是Ajax 1.2 为什么要学习Ajax 之前所学的技术&#xff0c…...

心理学笔记——我们如何思考-思想、语言和手语

我们如何思考-思想、语言和手语 研究语言的理论&#xff1a;计算理论、认知神经学、进化论 当我们讨论语言时&#xff0c;指的是英语、中文、日语这样的语言系统 所有语言都共享一些深层且复杂的共性&#xff0c;最直观的就是每一种语言都能够有效地表达抽象概念——思想、物…...

Matlab处理excel数据

我们新建个excel文档&#xff0c;用Matlab读取里面的内容&#xff0c;计算和判断里面的计算结果是否正确&#xff0c;并打印到另一个文档当中。 新建文档 新建输入文档&#xff0c;文件名TestExcel 编写脚本 [num,txt] xlsread(TestExcel.xlsx); SNcode num(:,1);%从序号中…...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

IGP(Interior Gateway Protocol,内部网关协议)

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

HBuilderX安装(uni-app和小程序开发)

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案

JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停​​ 1. ​​安全点(Safepoint)阻塞​​ ​​现象​​:JVM暂停但无GC日志,日志显示No GCs detected。​​原因​​:JVM等待所有线程进入安全点(如…...

【Redis】笔记|第8节|大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

Leetcode33( 搜索旋转排序数组)

题目表述 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...