#yyds干货盘点#JS 解析 excel 文件

Posted 2022-11-03

JS解析excel文件分为如下几步：

1. 使用 ​​js​​ 解压缩 ​​excel​​ 文件
2. 获取到其中的 ​​sheet​​ 文件内容，然后将 ​​xml​​ 数据解析出来
3. 将数据转换成我们想要的形状

ZIP 解压

关于 ​​JS​​​ 如何实现 ​​ZIP​​​ 解压的，上一篇文章也有提到，这里我们就不细说，直接使用 ​​jszip​​ 搞定：

document.querySelector(#file).addEventListener(change, async e => 
    const file = e.target.files[0];
    if (!file) return;
    const zip = await JSZip.loadAsync(file);
    const sheetXML = await zip.files[xl/worksheets/sheet1.xml].async(string);
);
复制代码

快速搞定，现在 ​​sheetXML​​ 就是我们刚刚看到的 ​​sheet1.xml​​ 中的数据了。

XML 解析

然后我们即可解析 ​​XML​​​ 内容将其中数据取出，​​xml​​​ 解析原理很简单，和 ​​html parse​​ 一样，了解原理咱就直接随便搞个开源库帮忙搞定：

import convert from xml-js;

const result = convert.xml2json(sheetXML,  compact: true, spaces: 4 );
复制代码

然后我们就得到了这样一串 ​​JSON​​（删除了部分内容）：

    "_declaration": 
        "_attributes": 
    ,
    "worksheet": 
        "_attributes": ,
        "sheetPr": ,
        "dimension": 
            "_attributes": 
                "ref": "A1:C7"
            
        ,
        "sheetData": 
            "row": [
                
                    "_attributes": 
                        "r": "1",
                        "spans": "1:3"
                    ,
                    "c": [
                        
                            "_attributes": 
                                "r": "A1"
                            ,
                            "v": 
                                "_text": "1"
                            
                        ,
                        
                            "_attributes": 
                                "r": "C1"
                            ,
                            "v": 
                                "_text": "2"
                            
                        
                    ]
                ,
                
                    "_attributes": 
                        "r": "7",
                        "spans": "1:3"
                    ,
                    "c": [
                        
                            "_attributes": 
                                "r": "A7"
                            ,
                            "v": 
                                "_text": "1"
                            
                        ,
                        
                            "_attributes": 
                                "r": "C7"
                            ,
                            "v": 
                                "_text": "2"
                            
                        
                    ]
                
            ]
        
    

接下来，我们只需要将 ​​sheetData​​ 中的数据取出，然后按照内部的属性生成自己想要的数据格式即可。