【sheetjs】纯前端如何实现Excel导出下载和上传解析?

简介: 本文介绍了如何使用`sheetjs`的`xlsx`库在前端实现Excel的导出和上传。项目依赖包括Vite、React、SheetJS和Arco-Design。对于导出,从后端获取JSON数据,通过`json_to_sheet`、`book_new`和`writeFile`函数生成并下载Excel文件。对于上传,使用`read`函数将上传的Excel文件解析为JSON并发送至后端。完整代码示例可在GitHub仓库[fullee/sheetjs-demo](https://github.com/fullee/sheetjs-demo)中查看。

最近忙着做项目,Rust精华小册忙完项目就更新😁。近期文章总结一下项目中遇到的一些好玩的点。

本文介绍的是sheetjs下面的xlsx库, 它有付费版和开源版。付费版可以为表格设置好看的样式,开源版则没有这些功能。

Github仓库停留在两年前的版本了,最新的版本是自托管的,仓库地址如下:
https://git.sheetjs.com/sheetjs/sheetjs

首先,我们基于vite创建一个react的项目,然后将xlsx安装到我们的项目:

npm i --save https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz

整个项目用到了vite、react、sheetjs、arco-design(字节的ReactUI框架,类似antd)。

前端实现Excel导出下载

先说一下需求,我们从后端取到的json数据,经由前端处理成Excel的二进制格式,然后点击Button完成下载。

20240518113033_rec_.gif

这个需求比较简单,但要我们从零实现,还是会费一些功夫。好在有xlsx帮我们简化这个实现过程。

import {read, utils, writeFile} from "xlsx";

<button onClick={() => {
    // 假设我们从后端获取到的json如下
    const json = [
        {name: "George Washington", birthday: "1732-02-22"},
        {name: "John Adams", birthday: "1735-10-19"},
    ];
    // 构造sheet
    const worksheet = utils.json_to_sheet(json);
    // 构造workbook
    const workbook = utils.book_new();
    utils.book_append_sheet(workbook, worksheet, "Dates");
        // 默认使用json结构中的name和birthday作为表头,也可以使用下面代码自定义表头
        utils.sheet_add_aoa(worksheet, [['ID', '指标名称']], { origin: 'A1' });

    // 下载文件
    writeFile(workbook, "Presidents.xlsx", {compression: true});
}}>
    Download Excel
</button>

总结上面代码的步骤:

  1. 从后端获取json数据
  2. 将json构造为worksheet,并起一个名字叫做Dates。如图,可以将worksheet理解为一个Tab页。

Pasted image 20240518201947.png

  1. 将worksheet放到workbook中,一个workbook就是一个excel文件了。
  2. 最后一步就是下载Excel。

前端实现Excel上传解析

上传的需求是,点击上传按钮选择文件,然后通过xlsx这个库解析成json,整个都是过程是在浏览器中进行的。最后将json传给后端即可。示意图如下:

20240518113324_rec_.gif

同样,我们这里用到的解析库也是sheetjs提供的xlsx库。

import {read, utils, writeFile} from "xlsx";
import {Message, Upload} from "@arco-design/web-react";
import '@arco-design/web-react/dist/css/arco.min.css'

<Upload
    multiple
    action='/'
    beforeUpload={async (file) => {
                // 将file对象转换为一个arrayBuffer
        const fileBuffer = await file.arrayBuffer()
                // 使用read函数解析为workbook对象
        const workbook = read(fileBuffer)

        console.log(workbook.SheetNames)
        console.log(workbook.Sheets)
                // 获取到第一个worksheet
        const first_sheet = workbook.Sheets[workbook.SheetNames[0]];
                // 将worksheet中的数据转换为json结构的数据
        const json = utils.sheet_to_json(first_sheet)
        Message.success(JSON.stringify(json))
        return Promise.reject();
    }}
/>

总结一下上面代码的步骤:

  1. 想办法获取到File对象,可以用input标签设为file类型,也可以像我这样使用UI提供的Upload组件。
  2. 将file对象转换为一个ArrayBuffer
  3. 使用read函数解析为workbook对象
  4. 获取到第一个worksheet
  5. 将worksheet中的数据转换为json结构的数据

详细的源码可以查看代码仓库:https://github.com/fullee/sheetjs-demo

好啦,如果文章对您有帮助,欢迎点赞收藏加关注,点赞越多更新越快,哈哈。下篇文章计划是总结一下项目中用到的React状态库zustand。

相关文章
|
5天前
|
前端开发 JavaScript 数据处理
前端新手指南:如何解决JavaScript导出CSV文件不完整的问题
【6月更文挑战第4天】在JavaScript中处理CSV文件时,需要特别注意一些特殊字符,例如逗号、双引号、换行符等。这些字符可能会影响CSV文件的解析,导致数据错乱。
21 0
|
21小时前
|
easyexcel Java API
SpringBoot集成EasyExcel 3.x:高效实现Excel数据的优雅导入与导出
SpringBoot集成EasyExcel 3.x:高效实现Excel数据的优雅导入与导出
7 1
|
2天前
|
JSON 资源调度 JavaScript
蓝易云 - vue实现导出excel的多种方式
以上两种方式都可以实现在Vue中导出Excel的功能,你可以根据你的需求选择合适的方式。
5 1
|
2天前
|
缓存 前端开发 JavaScript
【前端性能优化】深入解析重绘和回流,构建高性能Web界面
【前端性能优化】深入解析重绘和回流,构建高性能Web界面
14 1
|
2天前
|
存储 缓存 移动开发
前端开发中常用的存储方法(带解析)
前端存储方法包括Cookie、localStorage、sessionStorage、IndexedDB和已废弃的WebSQL。Cookie用于存储小量数据,每次请求时发送到服务器,可设置过期时间。localStorage和sessionStorage都是HTML5提供的,前者数据永久存储,后者会话关闭后清除。IndexedDB是存储大量结构化数据的数据库,支持索引和事务。WebSQL已废弃,但部分浏览器仍支持。Cache Storage用于缓存响应,提高离线访问性能,通过Service Worker控制。
|
5天前
|
JavaScript 前端开发
JS导出excel功能
JS导出excel功能
|
5天前
|
Go
golang解析excel、csv编码格式
golang解析excel、csv编码格式
9 4
|
9天前
|
算法 数据挖掘 大数据
深入解析力扣171题:Excel表列序号(进制转换法详解及模拟面试问答)
深入解析力扣171题:Excel表列序号(进制转换法详解及模拟面试问答)
|
9天前
|
存储 算法 数据挖掘
深入解析力扣168题:Excel表列名称(进制转换法详解及模拟面试问答)
深入解析力扣168题:Excel表列名称(进制转换法详解及模拟面试问答)
|
13天前
|
前端开发
react框架对Excel文件进行上传和导出
react框架对Excel文件进行上传和导出

推荐镜像

更多