前端导出 Excel📃

小小小怪兽
1,783 阅读6分钟

引言

在一些后台项目中，数据导出为 Excel 文件是一个非常常见的需求。通常我们需要后端生成 Excel 文件并返回给前端下载，但这种方式会增加服务器的负担，并且需要前后端的协作。所以有时候需要我们通过纯前端的方式来实现 Excel 的导出功能。这里将介绍如何使用 js-xlsx 库在前端实现 Excel 文件的导出。

什么是 js-xlsx？

js-xlsx 是一个强大的 JavaScript 库，用于读取、写入和操作 Excel 文件。它支持多种 Excel 文件格式，包括 .xlsx、.xlsb、.xlsm 等。js-xlsx 的主要特点包括：

  • 纯前端实现，无需后端支持。
  • 支持多种 Excel 文件格式。
  • 提供丰富的 API，方便操作 Excel 文件。
  • 支持大数据量的处理。

安装 js-xlsx

在使用 js-xlsx 之前，我们需要先安装它。可以通过 npm 或直接引入 CDN 的方式来安装。

使用 npm 安装

如果你使用的是 npm 管理的项目，可以通过以下命令安装 js-xlsx：

npm install xlsx

安装完成后，可以在项目中通过 import 或 require 引入：

import XLSX from 'xlsx';
// 或者
const XLSX = require('xlsx');

使用 CDN 引入

如果你不想使用 npm，也可以通过 CDN 直接引入 js-xlsx：

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>

基本用法

创建一个简单的 Excel 文件

首先，我们来看一个简单的例子，如何创建一个包含数据的 Excel 文件并导出。

// 引入 js-xlsx
const XLSX = require('xlsx');

// 创建一个工作簿
const workbook = XLSX.utils.book_new();

// 创建一个工作表
const data = [
  ["Name", "Age", "City"],
  ["Alice", 30, "New York"],
  ["Bob", 25, "Los Angeles"],
  ["Charlie", 35, "Chicago"]
];
const worksheet = XLSX.utils.aoa_to_sheet(data);

// 将工作表添加到工作簿
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");

// 导出 Excel 文件
XLSX.writeFile(workbook, "example.xlsx");

在这个例子中，我们首先创建了一个工作簿，然后创建了一个包含数据的二维数组，并将其转换为工作表。最后，我们将工作表添加到工作簿中，并导出为 Excel 文件。

读取 Excel 文件

除了导出 Excel 文件，js-xlsx 还可以读取 Excel 文件并解析其中的数据。以下是一个读取 Excel 文件的例子：

// 假设我们有一个 input 元素用于选择文件
const input = document.getElementById('file-input');

input.addEventListener('change', function(e) {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.onload = function(e) {
    const data = new Uint8Array(e.target.result);
    const workbook = XLSX.read(data, { type: 'array' });

    // 获取第一个工作表
    const sheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[sheetName];

    // 将工作表转换为 JSON 数据
    const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
    console.log(jsonData);
  };

  reader.readAsArrayBuffer(file);
});

在这个例子中，我们通过 FileReader 读取用户选择的 Excel 文件，并使用 XLSX.read 方法解析文件内容。然后，我们将工作表转换为 JSON 数据并输出到控制台。

高级用法

处理复杂数据结构

在实际应用中，我们可能需要处理更复杂的数据结构。js-xlsx 提供了多种工具方法来处理不同的数据结构。

将 JSON 数据转换为工作表

假设我们有一个 JSON 数组，每个对象代表一行数据：

const data = [
  { Name: "Alice", Age: 30, City: "New York" },
  { Name: "Bob", Age: 25, City: "Los Angeles" },
  { Name: "Charlie", Age: 35, City: "Chicago" }
];

我们可以使用 XLSX.utils.json_to_sheet 方法将其转换为工作表：

const worksheet = XLSX.utils.json_to_sheet(data);

将 HTML 表格转换为工作表

如果页面上有一个 HTML 表格，我们可以直接将其转换为工作表：

<table id="my-table">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>30</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>25</td>
    <td>Los Angeles</td>
  </tr>
  <tr>
    <td>Charlie</td>
    <td>35</td>
    <td>Chicago</td>
  </tr>
</table>

const table = document.getElementById('my-table');
const worksheet = XLSX.utils.table_to_sheet(table);

设置单元格样式

js-xlsx 还支持设置单元格的样式，例如字体、背景颜色、边框和对齐方式等。以下是一个设置单元格样式的例子：

const worksheet = XLSX.utils.aoa_to_sheet([
  ["Name", "Age", "City"],
  ["Alice", 30, "New York"],
  ["Bob", 25, "Los Angeles"],
  ["Charlie", 35, "Chicago"]
]);

// 设置第一行的样式
worksheet['A1'].s = {
  font: { name: 'Arial', sz: 14, bold: true, color: { rgb: "FF0000" } },
  fill: { fgColor: { rgb: "FFFF00" } },
  border: { top: { style: 'thin', color: { rgb: "000000" } }, bottom: { style: 'medium', color: { rgb: "FF0000" } } },
  alignment: { horizontal: 'center', vertical: 'center' }
};

worksheet['B1'].s = {
  font: { name: 'Calibri', sz: 12, italic: true, color: { rgb: "00FF00" } },
  fill: { fgColor: { rgb: "00FFFF" } },
  border: { left: { style: 'thick', color: { rgb: "00FF00" } }, right: { style: 'dashed', color: { rgb: "0000FF" } } },
  alignment: { horizontal: 'left', vertical: 'top', wrapText: true }
};

worksheet['C1'].s = {
  font: { name: 'Times New Roman', sz: 16, underline: true, color: { rgb: "0000FF" } },
  fill: { fgColor: { rgb: "FF00FF" } },
  border: { top: { style: 'dotted', color: { rgb: "FF00FF" } }, bottom: { style: 'double', color: { rgb: "00FFFF" } } },
  alignment: { horizontal: 'right', vertical: 'bottom' }
};

const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
XLSX.writeFile(workbook, "combined-styles.xlsx");

在某些情况下，我们可能需要合并单元格。js-xlsx 提供了 !merges 属性来处理合并单元格。

合并单元格

在某些情况下，我们可能需要合并单元格。js-xlsx 提供了 !merges 属性来处理合并单元格。

const worksheet = XLSX.utils.aoa_to_sheet([
  ["Name", "Age", "City"],
  ["Alice", 30, "New York"],
  ["Bob", 25, "Los Angeles"],
  ["Charlie", 35, "Chicago"]
]);

// 合并 A1 和 B1 单元格
worksheet['!merges'] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 1 } }];

const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
XLSX.writeFile(workbook, "merged-cells.xlsx");

在这个例子中，我们将 A1 和 B1 单元格合并为一个单元格。

处理大数据量

当处理大数据量时，直接操作 DOM 或 JSON 可能会导致性能问题。js-xlsx 提供了流式处理的方式来处理大数据量。

以下是一个流式处理的例子：

const data = [];
for (let i = 0; i < 100000; i++) {
  data.push([`Name${i}`, i, `City${i}`]);
}

const worksheet = XLSX.utils.aoa_to_sheet(data);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");

// 使用 writeFile 方法导出文件
XLSX.writeFile(workbook, "large-data-example.xlsx");

我们生成了一个包含 10 万行数据的 Excel 文件。通过流式处理的方式，即使数据量很大，也不会导致内存溢出或性能问题。

处理多工作表

js-xlsx 也提供了 book_append_sheet 方法来添加多个工作表。

const workbook = XLSX.utils.book_new();

// 创建第一个工作表
const data1 = [
  ["Name", "Age", "City"],
  ["Alice", 30, "New York"],
  ["Bob", 25, "Los Angeles"],
  ["Charlie", 35, "Chicago"]
];
const worksheet1 = XLSX.utils.aoa_to_sheet(data1);
XLSX.utils.book_append_sheet(workbook, worksheet1, "Sheet1");

// 创建第二个工作表
const data2 = [
  ["Product", "Price", "Quantity"],
  ["Apple", 1.2, 10],
  ["Banana", 0.8, 15],
  ["Orange", 1.5, 20]
];
const worksheet2 = XLSX.utils.aoa_to_sheet(data2);
XLSX.utils.book_append_sheet(workbook, worksheet2, "Sheet2");

// 导出 Excel 文件
XLSX.writeFile(workbook, "multiple-sheets.xlsx");

创建两个工作表，并将它们添加到同一个工作簿中，最后导出为一个 Excel 文件。

处理公式

Excel 中的公式是非常强大的功能，可以用于计算、数据分析等。js-xlsx 支持在单元格中设置公式。

const worksheet = XLSX.utils.aoa_to_sheet([
  ["Product", "Price", "Quantity", "Total"],
  ["Apple", 1.2, 10],
  ["Banana", 0.8, 15],
  ["Orange", 1.5, 20]
]);

// 设置 Total 列的公式
worksheet['D2'].f = 'B2*C2';
worksheet['D3'].f = 'B3*C3';
worksheet['D4'].f = 'B4*C4';

const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
XLSX.writeFile(workbook, "formulas.xlsx");

我们在 Total 列中设置了公式，用于计算每个产品的总价。

示例

导出表格数据

我们可以将表格数据导出为 Excel 文件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Export Table to Excel</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>
</head>
<body>
  <table id="my-table">
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
    <tr>
      <td>Alice</td>
      <td>30</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>25</td>
      <td>Los Angeles</td>
    </tr>
    <tr>
      <td>Charlie</td>
      <td>35</td>
      <td>Chicago</td>
    </tr>
  </table>
  <button onclick="exportTableToExcel()">Export to Excel</button>

  <script>
    function exportTableToExcel() {
      const table = document.getElementById('my-table');
      const worksheet = XLSX.utils.table_to_sheet(table);
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
      XLSX.writeFile(workbook, "table-export.xlsx");
    }
  </script>
</body>
</html>

点击按钮将 HTML 表格导出为 Excel 文件。

导出 JSON 数据

如果数据是以 JSON 格式存储的，我们也可以将其导出为 Excel 文件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Export JSON to Excel</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>
</head>
<body>
  <button onclick="exportJsonToExcel()">Export JSON to Excel</button>

  <script>
    const data = [
      { Name: "Alice", Age: 30, City: "New York" },
      { Name: "Bob", Age: 25, City: "Los Angeles" },
      { Name: "Charlie", Age: 35, City: "Chicago" }
    ];

    function exportJsonToExcel() {
      const worksheet = XLSX.utils.json_to_sheet(data);
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
      XLSX.writeFile(workbook, "json-export.xlsx");
    }
  </script>
</body>
</html>

点击按钮就可以将 JSON 数据导出为 Excel 文件。

总结

通过 js-xlsx，我们可以在前端轻松实现 Excel 文件的导出和读取。无论是简单的数据导出，还是复杂的样式设置和大数据处理，js-xlsx 都提供了强大的支持。希望通过本文的介绍能够帮助你在实际项目中更好地使用 js-xlsx，提升开发效率和用户体验。

官方文档：

github.com/SheetJS/she…。

avatar
文章
阅读
粉丝