在前端使用XLSX处理Excel (antd环境)

简介:

前端处理excel我们要用到XLSX这个组件,它的github地址是https://github.com/SheetJS/js-xlsx
使用前可以通过npm安装:

 npm install xlsx

其他安装方式请参考github主页。
安装后在页面引入

import XLSX from 'xlsx';

antd的文件上传组件是Upload,把他引入

import {Button, Upload, Tooltip } from 'antd';

假设我们通过一个按钮把excel文件导入:

                    <Upload {...uploadprops}>
                        <Tooltip title='导入excel文件'>
                            <Button  type="primary" >
                                <Icon type="upload" /> 导入
                            </Button>
                        </Tooltip>
                    </Upload>

Upload的参数列表uploadprops我们要定义一下:

const uploadprops = {
    // 这里我们只接受excel2007以后版本的文件,accept就是指定文件选择框的文件类型
    accept: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    name: 'file',
    headers: {
        authorization: 'authorization-text',
    },
    showUploadList: false,
    // 把excel的处理放在beforeUpload事件,否则要把文件上传到通过action指定的地址去后台处理
    // 这里我们没有指定action地址,因为没有传到后台
    beforeUpload: (file, fileList) => {
        var rABS = true;
        const f = fileList[0];
        var reader = new FileReader();
        reader.onload = function (e) {
            var data = e.target.result;
            if (!rABS) data = new Uint8Array(data);
            var workbook = XLSX.read(data, {
                type: rABS ? 'binary' : 'array'
            });
            // 假设我们的数据在第一个标签
            var first_worksheet = workbook.Sheets[workbook.SheetNames[0]];
            // XLSX自带了一个工具把导入的数据转成json
            var jsonArr = XLSX.utils.sheet_to_json(first_worksheet, {header:1});
            // 通过自定义的方法处理Json,比如加入state来展示
            handleImpotedJson(jsonArr.slice(1));
        };
        if (rABS) reader.readAsBinaryString(f); else reader.readAsArrayBuffer(f);
        return false;
    }
};

这样,当通过浏览器的文件选择框选择了文件后,就会进入beforeUpload事件开始执行我们的代码。

有一个问题是:有时候XLSX不能确定最后一条记录,已经扫描完了还要继续走。所以扫描出来的数组末尾有空元素,需要过滤掉

我估计是excel可以设置数据边界,因为java使用后台工具POI处理也有这问题,希望有大神能指导一下

目录
相关文章
|
2月前
|
JSON 前端开发 开发工具
初探在WSL中设置vim前端开发环境
初探在WSL中设置vim前端开发环境
|
4月前
|
前端开发
windows10 安装node npm 等前端环境 并配置国内源
windows10 安装node npm 等前端环境 并配置国内源
244 3
|
21天前
|
前端开发
前端使用xlsx模板导出表格
【9月更文挑战第10天】在前端使用 `xlsx` 模板导出表格需完成以下步骤:首先引入 `xlsx` 库,准备数据与模板;接着读取模板文件,选择特定工作表并填充数据;最后将填充后的表格转换为二进制数据,创建 Blob 对象并触发下载。整个过程中可根据需求调整模板格式和数据填充方式。
|
2月前
|
前端开发 JavaScript
使用Vue+xlsx+xlsx-style实现导出自定义样式的Excel文件
本文介绍了在Vue项目中使用`xlsx`和`xlsx-style`(或`xlsx-style-vite`)库实现导出具有自定义样式的Excel文件的方法,并提供了详细的示例代码和操作效果截图。
337 1
使用Vue+xlsx+xlsx-style实现导出自定义样式的Excel文件
|
2月前
|
前端开发 JavaScript
【Azure 环境】前端Web通过Azure AD获取Token时发生跨域问题(CORS Error)
【Azure 环境】前端Web通过Azure AD获取Token时发生跨域问题(CORS Error)
|
3月前
|
存储 对象存储 Python
`openpyxl`是一个用于读写Excel 2010 xlsx/xlsm/xltx/xltm文件的Python库。它不需要Microsoft Excel,也不需要.NET或COM组件。
`openpyxl`是一个用于读写Excel 2010 xlsx/xlsm/xltx/xltm文件的Python库。它不需要Microsoft Excel,也不需要.NET或COM组件。
|
4月前
|
API Python
Python库`openpyxl`是一个用于读取和写入Excel 2010 xlsx/xlsm/xltx/xltm文件的库。
【6月更文挑战第19天】`openpyxl`是Python处理xlsx文件的库,支持读写Excel 2010格式。使用`pip install openpyxl`安装。基本操作包括加载文件、读写单元格、操作行和列。例如,加载Excel后,可以读取单元格`A1`的值,或将“Hello, World!”写入`A1`。还可修改单元格内容,如加1后保存到新文件。更多功能,如样式和公式,见官方文档[1]。 [1]: &lt;https://openpyxl.readthedocs.io/en/stable/&gt;
65 1
|
3月前
|
前端开发 JavaScript PHP
技术心得:前端点击按钮,导入excel文件,上传到后台,excel接收和更新数据
技术心得:前端点击按钮,导入excel文件,上传到后台,excel接收和更新数据
38 0
|
3月前
|
前端开发
支付系统--微信支付21--搭建前端环境,payment-demo-front这个项目文件夹是前端显示文件,payment-demo是后端项目,支付页面常见三个页面:购买课程,我的订单,下载账单
支付系统--微信支付21--搭建前端环境,payment-demo-front这个项目文件夹是前端显示文件,payment-demo是后端项目,支付页面常见三个页面:购买课程,我的订单,下载账单
|
5月前
|
JSON Rust 前端开发
【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)中查看。
284 10
下一篇
无影云桌面