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

这篇具有很好参考价值的文章主要介绍了使用JavaScript和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文件,并将其保存到本地文件系统中。文章来源地址https://www.toymoban.com/news/detail-858819.html

到了这里,关于使用JavaScript和XLSX.js将数据导出为Excel文件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序】导出 Excel 报表并分享,使用xlsx库生成 Excel,使用echars插入图表、使用pdfmake导出为PDF文件

    要在微信小程序中导出 Excel 报表并分享,可以使用第三方库 xlsx 来生成 Excel 文件,并使用 wx.saveFile 方法将文件保存到本地,然后使用 wx.shareFile 方法来分享文件。 以下是一个示例代码,演示如何在微信小程序中导出 Excel 报表并分享: 首先,安装依赖库 xlsx ,可以使用 npm

    2024年02月13日
    浏览(142)
  • 前端基于XLSX实现数据导出到Excel表格,以及提示“文件已经被损坏,无法打开”的解决方法

    一、vue实现导出excel 1、前端实现 xlsx是一个用于读取、解析和写入Excel文件的JavaScript库。它提供了一系列的API来处理Excel文件。使用该库,你可以将数据转换为Excel文件并下载到本地。这种方法适用于在前端直接生成Excel文件的场景。 更多介绍可参见官网 1、安装xlsx依赖 2、引

    2024年01月23日
    浏览(84)
  • 纯前端导出,设置导出xlsx文件样式xlsx-js-style

    设置导出的表格样式,xlsx-js-style!真的绝绝子! 1.下载xlsx-js-style依赖 2.在main.js中挂载到vue原型上,方便使用  3.页面具体写法 参考:前端根据后端返回数据导出指定样式的表格(xlsx-js-style)_前端excel导出指定格式-CSDN博客

    2024年01月17日
    浏览(42)
  • 前端JS实现导出xlsx文件

    需求背景: 需要导出表格的数据,由于后端不提供导出接口,所以由前端通过JSON数据导出实现。 使用的插件: js-export-excel 安装: npm install js-export-excel 使用: 亲测有用,只要前端能拿到的是表格全量数据,就能直接导出表格所有数据。但如果是后端分页查询的表格,前端

    2024年02月04日
    浏览(58)
  • 前端使用xlsx插件读取excel文件数据

    使用 xlsx 插件在前端读取Excel文件数据具有以下优点和缺点,适用于以下场景: 简单易用: xlsx 插件提供了简单的API来读取Excel文件数据,无需复杂的配置和依赖。 完整的功能: xlsx 插件支持读取各种Excel文件格式,包括XLS和XLSX等常见格式,可以读取多个工作表和多种数据类

    2024年02月14日
    浏览(62)
  • vue+xlsx实现前端模版下载、导入和导出excel文件

    产品需求:后端不想写下载,导入和导出的接口,让我们前端自己实现。 这里我们就可以用xlsx插件来实现,我们不多说了,先放一下实现的图片,下面我们分别把模版下载、导入和导出的代码放上来,想用的话,直接复制粘贴即可! 模版下载图片 导出图片: 好了,下面我

    2024年02月13日
    浏览(61)
  • sheetJs / xlsx-js-style 纯前端实现导出 excel 表格及自定义单元格样式

    xlsx 地址:https://www.npmjs.com/package/xlsx SheetJs 地址:https://docs.sheetjs.com/docs/ xlsx-js-style 地址:https://www.npmjs.com/package/xlsx-js-style !cols 设置列宽 cols 为一个对象数组,依次表示每一列的宽度 wpx 字段表示以像素为单位,wch 字段表示以字符为单位 hidden 如果为真,则隐藏该列 !rows 设

    2024年02月06日
    浏览(45)
  • vue中使用xlsx插件导出多sheet excel实现方法

    安装xlsx,一定要注意版本:  package.json: App.vue: 设置单元格宽度:  

    2024年02月07日
    浏览(57)
  • Java excel poi 使用HSSFWorkbook 导出的excel wps能打开office打不开问题解决 Excel无法打开xx.xlsx,因为文件格式或扩展名无效......

    1.在开发代码中涉及到报表导出 xlsx文件 office打不开问题 JavaPOI导出Excel有三种形式,他们分别是 1.HSSFWorkbook 2.XSSFWorkbook 3.SXSSFWorkbook。 pom文件如下 检查创建sheet代码如下 代码中用了 HSSFworkbook 去创建Sheet 导致office打不开原因就在这里 HSSFworkbook 解释如下: HSSFWorkbook:是操作Exc

    2024年02月16日
    浏览(53)
  • vue导入导出excel、设置单元格背景色、文字居中、合并单元格、设置列宽(使用xlsx库和xlsx-style库)

    xlsx 是由 SheetJS 开发的一个处理excel文件的npm库 适用于前端开发者实现导入导出excel文件的经典需求 为了区别于xlsx文件,突出其应用语言,该库通常又被称为 js-xlsx 需要以下步骤: 安装 xlsx 库 你可以使用 npm 包管理器安装 xlsx 库,也可以将 xlsx 下载到本地,然后在 HTML 文件中

    2024年02月16日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包