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​​ 中的数据取出，然后按照内部的属性生成自己想要的数据格式即可。