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

news/2024/7/21 6:08:29 标签: javascript, 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文件的完整代码示例:

javascript">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文件的完整代码示例:

javascript">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文件,并将其保存到本地文件系统中。


http://www.niftyadmin.cn/n/5354032.html

相关文章

MySQL二月进阶学习计划

CSDN的各位读者&#xff0c;大家好。马上过年了&#xff0c;最近工作不是很忙&#xff0c;所以有很多时间用来学习。 过去的一周我也学习了一部分内容&#xff0c;但是像无头苍蝇一样没有规划。 我计划用整个2月的时间&#xff0c;再好好学习一遍MySQL数据库相关的知识。下面是…

拼多多砍价群2024互相互助帮忙助力

分享最新拼多多现金助力互助微信群138个&#xff0c;井然有序打发时间&#xff0c;拼多多互点不求人&#xff0c;#拼多多互助群#一起来相互助力&#xff01; 拼多多互助砍价群免费助力互助群&#xff0c;拼多多助力群免费微信&#xff0c;识别下方二维码进群。拼多多助力群免费…

HiveSQL题——排序函数(row_number/rank/dense_rank)

一、窗口函数的知识点 1.1 窗户函数的定义 窗口函数可以拆分为【窗口函数】。窗口函数官网指路&#xff1a; LanguageManual WindowingAndAnalytics - Apache Hive - Apache Software Foundationhttps://cwiki.apache.org/confluence/display/Hive/LanguageManual%20Windowin…

路口最短时间问题(100%用例)C卷(JavaPythonC++Node.jsC语言)

假定街道是棋盘型的,每格距离相等,车辆通过每格街道需要时间均为 timePerRoad; 街道的街口(交叉点)有交通灯,灯的周期T(=lights[row][col])各不相同;车辆可直行、左转和右转,其中直行和左转需要等相应T时间的交通灯才可通行,右转无需等待。 现给出 n*m 个街口的交通灯周期…

ChatGPT升级界面支持中文

一、突发消息 刚刚Openai公司又放了大招&#xff0c;开始支持中文界面了。 就在刚刚&#xff0c;经常使用ChatGPT的朋友会在网页上方收到测试通知&#xff0c;提醒你加入alpha测试。 无论是ChatGPT3.5还是ChatGPT4.0的用户都报告收到了通知&#xff0c;大概率是面向所有的用户…

Visual Studio 2022 C++ 生成dll或so文件在windows或linux下用C#调用

背景 开发中我们基本使用windows系统比较快捷&#xff0c;但是部署的时候我们又希望使用linux比较便宜&#xff0c;硬件产商还仅提供了c sdk&#xff01;苦了我们做二次开发的码农。 方案 需要确认一件事&#xff0c;目前c这门语言不是跨平台的 第一个问题【C生成dll在window…

Java基于SpringBoot+Vue的电影影城管理系统,附源码,文档

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

Apache Commons Collection3.2.1反序列化分析(CC1)

Commons Collections简介 Commons Collections是Apache软件基金会的一个开源项目&#xff0c;它提供了一组可复用的数据结构和算法的实现&#xff0c;旨在扩展和增强Java集合框架&#xff0c;以便更好地满足不同类型应用的需求。该项目包含了多种不同类型的集合类、迭代器、队…