利用纯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文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Bootstrap实现基于carousel.js框架的轮播图效果

    Bootstrap实现基于carousel.js框架的轮播图效果

    这篇文章主要为大家详细介绍了Bootstrap实现基于carousel.js框架的轮播图效果,无过渡动画,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • JavaScript提高网站性能优化的建议(二)

    JavaScript提高网站性能优化的建议(二)

    这篇文章主要介绍了JavaScript提高网站性能优化的建议(二)的相关资料,需要的朋友可以参考下
    2016-07-07
  • 小程序实现登录功能

    小程序实现登录功能

    这篇文章主要为大家详细介绍了小程序实现登录功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • JS与C#编码解码

    JS与C#编码解码

    这篇文章主要是对JS与C#编码解码进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • js修改input的type属性问题探讨

    js修改input的type属性问题探讨

    当input元素还未插入文档流之前,是可以修改它的值的,在ie和ff下都没问题。但如果input已经存在于页面,其type属性在ie下就成了只读属性了,不可以修改
    2013-10-10
  • 使用js修改客户端注册表的方法

    使用js修改客户端注册表的方法

    这篇文章介绍了使用js修改客户端注册表的方法,有需要的朋友可以参考一下
    2013-08-08
  • 浅谈Javascript如何实现匀速运动

    浅谈Javascript如何实现匀速运动

    这篇文章主要介绍了浅谈Javascript如何实现匀速运动的方法及相关代码,需要的朋友可以参考下
    2014-12-12
  • JavaScript循环遍历小结

    JavaScript循环遍历小结

    本文给大家总结了javascript中的循环遍历,给大家总结的非常全面,感兴趣的朋友跟随小编一起看看吧
    2018-09-09
  • echarts浮动显示单位的实现方法示例

    echarts浮动显示单位的实现方法示例

    这篇文章主要给大家介绍了关于echarts浮动显示单位的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • js跨域请求数据的3种常用的方法

    js跨域请求数据的3种常用的方法

    这篇文章主要介绍了js跨域请求数据的3种常用的方法,需要的朋友可以参考下
    2015-12-12

最新评论