纯JS读取导出Excel教程：原生API实现文件处理

一、导出 Excel 文件

生成 Excel 文档通常需将数据转换为特定格式（如 .xlsx 或 .xls）。在纯 JavaScript 环境中，可通过构造符合规范的二进制内容并触发下载操作来完成。

1.1 创建 Excel 表格

Excel 文档由若干工作表（Sheet）组成，每个工作表内含数据网格（Grid）。通过构建表格数据，并借助 Blob 对象封装二进制流，最终实现文件下载。

function exportExcel(data, filename) {
    const ws_name = "Sheet1"; // 设置工作表的名称
    const wb = {
        SheetNames: [ws_name],
        Sheets: {}
    };

    // 将二维数据数组转换为 Excel 格式
    const ws_data = [];
    for (let i = 0; i < data.length; i++) {
        ws_data.push(data[i]);
    }

    // 通过 SheetJS 的标准格式进行生成
    const ws = XLSX.utils.aoa_to_sheet(ws_data);

    wb.Sheets[ws_name] = ws;

    // 生成文件下载链接
    const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
    const blob = new Blob([wbout], { type: "application/octet-stream" });

    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = filename || 'export.xlsx';
    link.click();
}

1.2 触发下载

前述代码段仅生成了包含数据的 Excel 文件，未自动触发下载行为。需创建一个临时的 a 元素，结合 Blob 对象机制来启动文件下载流程。

const data = [
    ["Name", "Age", "City"],
    ["Alice", 25, "New York"],
    ["Bob", 30, "San Francisco"],
    ["Charlie", 35, "London"]
];

exportExcel(data, "people.xlsx");

该过程将生成一个 people.xlsx 文件，并保存至本地存储。

1.3 小结

借助基础 JavaScript 能力，可将二维数据数组转换为 Excel 文件。核心在于利用 Blob 对象处理二进制数据流，并通过 a 元素触发下载动作。

二、读取 Excel 文件

解析 Excel 文件内容相对复杂，因其本质为二进制数据。即便无第三方库支持，仍可借助 FileReader API 读取文件，并手动解析内部数据。

2.1 读取 Excel 文件并解析数据

利用 FileReader API 获取文件内容，并将其转换为可处理的数据结构。通过 XMLHttpRequest 或 FileReader 读取文件，随后使用 Blob 对二进制数据进行转换处理。

function readExcel(file, callback) {
    const reader = new FileReader();
    
    // 读取文件内容
    reader.onload = function (e) {
        const data = e.target.result;
        
        // 使用 FileReader 解析文件的二进制数据
        const binaryData = new Uint8Array(data);
        const workbook = XLSX.read(binaryData, { type: 'array' });

        // 获取工作表的数据
        const sheet = workbook.Sheets[workbook.SheetNames[0]];
        const rows = XLSX.utils.sheet_to_json(sheet, { header: 1 });  // 将工作表内容转化为二维数组

        callback(rows);  // 传递解析结果
    };

    reader.readAsArrayBuffer(file);
}

2.2 处理 Excel 文件

经上述代码处理，可将读取的 Excel 文件解析为二维数组（每行数据对应子数组）。随后可根据具体需求进行数据展示、存储或其他业务操作。

// 假设文件上传控件
const input = document.getElementById('file-input');
input.addEventListener('change', function (e) {
    const file = e.target.files[0];
    
    // 调用 readExcel 函数
    readExcel(file, function (data) {
        console.log(data);  // 输出解析后的数据
    });
});

该代码通过文件上传控件获取用户选择的 Excel 文件，并解析其内容。最终，解析所得数据将通过 callback 回调函数传递给调用方。

2.3 小结

结合 FileReader API 与 XLSX 库（此处假设已集成相关工具以解析 Excel 文件），可将 Excel 内容读取为可操作的 JavaScript 对象或二维数组。进而执行后续处理，如渲染、分析或持久化存储。

三、总结

本文阐述了在无第三方库依赖下，使用纯 JavaScript 实现 Excel 文件导入与导出的方法。导出功能通过构建二进制格式并触发下载实现，无需外部库支持。读取功能则利用原生 FileReader API 读取文件并解析内容。

尽管未引入第三方库，纯 JS 实现的读取和导出 Excel 功能在技术上是可行的。但在处理海量数据或需支持多种 Excel 格式的复杂场景中，采用如 XLSX 等专业库能提供更高效且灵活的解决方案。

据此，可根据项目实际需求权衡是否引入外部库，或仅依赖原生 API 完成功能开发。

至此，关于利用纯JavaScript实现读取和导出Excel文件的介绍完毕。如需了解更多纯JS读取和导出Excel文件相关内容，请查阅本站历史文章或继续浏览后续文章，感谢大家的支持！

纯JavaScript实现Excel文件的读取与导出