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

前言

导出数据是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文件，并将其保存到本地文件系统中。