利用纯JavaScript实现读取和导出Excel文件

 更新时间:2025年03月19日 11:08:09   作者:Riesenzahn  
在 Web 开发中,导入和导出 Excel 文件是一个常见的需求,特别是对于数据报表和分析等场景,虽然有很多第三方库(如 xlsx 和 sheetjs)提供了非常强大的功能,但本文将探讨如何不依赖第三方库,利用纯 JavaScript 来实现读取和导出Excel文件,需要的朋友可以参考下

一、导出 Excel 文件

导出 Excel 文件通常涉及将数据转化为 Excel 文件格式(如 .xlsx.xls)。在纯 JavaScript 中,我们可以通过手动生成一个 Excel 文件的格式化内容并下载。

1.1 创建 Excel 表格

Excel 文件通常由多个工作表(Sheet)构成,而每个工作表中包含一个表格(Grid)。我们通过生成表格数据,并利用 Blob 对象生成二进制数据,最终下载成 Excel 文件。

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 文件并解析内容相对复杂一些,因为 Excel 文件本质上是二进制格式数据。虽然没有第三方库的帮助,我们也可以通过 FileReader API 读取文件,手动解析 Excel 文件中的数据。

2.1 读取 Excel 文件并解析数据

可以通过 FileReader API 读取文件内容,并将其转化为一个可以处理的对象。我们使用 XMLHttpRequestFileReader 读取文件,然后使用 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 文件的导入和导出功能。对于导出 Excel,我们通过构建 Excel 的二进制格式并触发下载,达到了不依赖外部库的目的。而对于读取 Excel 文件,我们使用了原生的 FileReader API 来读取文件并解析出其内容。

虽然没有引入第三方库,纯 JS 实现的读取和导出 Excel 功能仍然是可行的,但在复杂场景下,如处理大量数据或支持多个 Excel 格式,使用像 XLSX 这类专门的库会更加高效和灵活。

这样,你可以根据项目需求决定是否使用外部库,或者仅依赖原生 API 来实现功能。

到此这篇关于利用纯JavaScript实现读取和导出Excel文件的文章就介绍到这了,更多相关纯JS读取和导出Excel文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS TypeScript的Map对象及联合类型实战

    JS TypeScript的Map对象及联合类型实战

    这篇文章主要介绍了JS TypeScript的Map对象及联合类型实战,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-08-08
  • Echarts图表中formatter的基本用法示例

    Echarts图表中formatter的基本用法示例

    formatter 提示框浮层内容格式器,支持字符串模板和回调函数两种形式,下面这篇文章主要给大家介绍了关于Echarts图表中formatter的基本用法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • JavaScript之appendChild、insertBefore和insertAfter使用说明

    JavaScript之appendChild、insertBefore和insertAfter使用说明

    这几天需要用到对HTML节点元素的删/插操作,由于用到insertBefore方法的时候遇到了一些麻烦,现在作为知识的整理,分别对appendChild、insertBefore和insertAfter做个总结
    2010-12-12
  • 有关suggest快速删除后仍然出现下拉列表的bug问题

    有关suggest快速删除后仍然出现下拉列表的bug问题

    写suggest的时候,有时我们快速删除输入框的文字后,但是suggest下拉列表还有出现,导致的原因是因为ajax异步请求造成的,下面通过本文给大家分享下解决方法,感兴趣的朋友一起看看
    2016-12-12
  • 输入法的回车与消息发送快捷键回车的冲突解决方法

    输入法的回车与消息发送快捷键回车的冲突解决方法

    下面小编就为大家带来一篇输入法的回车与消息发送快捷键回车的冲突解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • parabola.js抛物线与加入购物车效果的示例代码

    parabola.js抛物线与加入购物车效果的示例代码

    本篇文章主要介绍了parabola.js抛物线与加入购物车效果的示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • 返回上一个url并刷新界面的js代码

    返回上一个url并刷新界面的js代码

    要返回上一页再刷新页面我们用到最多的是在像php,asp,jsp,asp.net中,下面我来给大家先介绍js 返回前一页并刷新页面,然后再把这些代码放在php中实现删除后返回当前页面并刷新页面
    2020-09-09
  • 分享经典的JavaScript开发技巧

    分享经典的JavaScript开发技巧

    这篇文章向大家分享了40多个经典的JavaScript开发技巧,相信读完这篇文章对大家开发javascript有很大的帮助作用,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • javascript中的数据类型检测方法详解

    javascript中的数据类型检测方法详解

    这篇文章主要介绍了javascript中的数据类型检测方法,结合实例形式分析了javascript数据类型并总结分析了常见的数据类型检测操作技巧,需要的朋友可以参考下
    2019-08-08
  • JS数组去重常用方法实例小结【4种方法】

    JS数组去重常用方法实例小结【4种方法】

    这篇文章主要介绍了JS数组去重常用方法,结合实例形式总结分析了4种常用的数据去重实现方法,涉及javascript数组的遍历、判断、追加等相关操作技巧,需要的朋友可以参考下
    2018-05-05

最新评论