JavaScript 高效处理 Excel 文件的方法与实践

2026-03-15 12:10:02 2356阅读

在现代 Web 开发中，处理 Excel 文件是一个常见的需求。无论是数据导入、导出，还是数据分析，都可能涉及到 Excel 文件的操作。JavaScript 作为前端开发的主流语言，提供了多种方式来处理 Excel 文件。本文将详细介绍 JavaScript 处理 Excel 文件的相关技术和方法。

读取 Excel 文件

要在 JavaScript 中读取 Excel 文件，通常会使用第三方库，如 xlsx。xlsx 是一个功能强大的库，可以解析多种 Excel 文件格式。

安装 `xlsx` 库

如果你使用的是 Node.js 项目，可以通过 npm 来安装 xlsx 库：

npm install xlsx

读取本地 Excel 文件

以下是一个简单的示例，展示了如何使用 xlsx 库读取本地 Excel 文件：

const XLSX = require('xlsx');
const fs = require('fs');

// 读取文件
const file = fs.readFileSync('example.xlsx');
// 解析文件
const workbook = XLSX.read(file, { type: 'buffer' });

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

// 将工作表数据转换为 JSON 格式
const data = XLSX.utils.sheet_to_json(worksheet);
console.log(data);

在上述代码中，首先使用 fs 模块读取本地的 Excel 文件，然后使用 XLSX.read 方法解析文件。接着获取第一个工作表，并将其数据转换为 JSON 格式。

在浏览器中读取 Excel 文件

在浏览器中，可以通过 FileReader 对象来读取用户选择的 Excel 文件：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <input type="file" id="fileInput">
    <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
    <script>
        const fileInput = document.getElementById('fileInput');
        fileInput.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 firstSheetName = workbook.SheetNames[0];
                const worksheet = workbook.Sheets[firstSheetName];
                const jsonData = XLSX.utils.sheet_to_json(worksheet);
                console.log(jsonData);
            };

            reader.readAsArrayBuffer(file);
        });
    </script>
</body>

</html>

在这个示例中，通过 FileReader 对象读取用户选择的文件，并将其转换为 ArrayBuffer 格式。然后使用 xlsx 库解析文件，最后将数据转换为 JSON 格式。

写入 Excel 文件

除了读取 Excel 文件，JavaScript 还可以将数据写入 Excel 文件。同样可以使用 xlsx 库来实现。

将 JSON 数据写入 Excel 文件

以下是一个将 JSON 数据写入 Excel 文件的示例：

const XLSX = require('xlsx');
const fs = require('fs');

// 示例 JSON 数据
const data = [
    { name: 'John', age: 30 },
    { name: 'Jane', age: 25 }
];

// 将 JSON 数据转换为工作表
const worksheet = XLSX.utils.json_to_sheet(data);
// 创建工作簿
const workbook = XLSX.utils.book_new();
// 将工作表添加到工作簿
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

// 将工作簿保存为 Excel 文件
const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'buffer' });
fs.writeFileSync('output.xlsx', excelBuffer);

在上述代码中，首先定义了一个 JSON 数据数组，然后使用 XLSX.utils.json_to_sheet 方法将其转换为工作表。接着创建一个工作簿，并将工作表添加到工作簿中。最后使用 XLSX.write 方法将工作簿转换为二进制缓冲区，并使用 fs.writeFileSync 方法将其保存为 Excel 文件。

在浏览器中导出 Excel 文件

在浏览器中，可以使用 Blob 对象来导出 Excel 文件：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <button id="exportButton">Export to Excel</button>
    <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
    <script>
        const exportButton = document.getElementById('exportButton');
        exportButton.addEventListener('click', function () {
            const data = [
                { name: 'John', age: 30 },
                { name: 'Jane', age: 25 }
            ];
            const worksheet = XLSX.utils.json_to_sheet(data);
            const workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
            const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
            const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'output.xlsx';
            a.click();
            URL.revokeObjectURL(url);
        });
    </script>
</body>

</html>

在这个示例中，当用户点击按钮时，将 JSON 数据转换为 Excel 文件，并使用 Blob 对象创建一个临时的 URL。然后创建一个 <a> 标签，将其 href 属性设置为临时 URL，并设置 download 属性为文件名。最后模拟点击 <a> 标签来触发文件下载。