如果您有任何问题、投诉或建议，可以给我们在线留言哟！
2023年1月6日 来源：前端大全/p>
转自：嘿嘿Z
https://juejin.cn/post/7154395040507232264
今天来聊一聊如何使用 JS 来解析 excel 文件，当然不是直接使用 exceljs、sheetjs 之类的库，那就没意思了，而是主要说一下 JS 解析 excel 表格是如何实现的。
注意本文主要讨论 xlsx 格式的 excel 表格，其它格式未探究并不清楚。
首先要解析 excel 文件，得先了解他是如何存储数据的，经过我百般搜索，终于在 GG 中找到了答案：excel 文件其实是一个 zip 包！于是我赶紧新建了一个 xlsx 文件，在其中新建了两个 sheet 表，两个 sheet 表数据如下：
此为 sheet 1：
此为 sheet 2：
然后使用 zip 进行解压：
unzip test.xlsx -d test然后通过 tree 我们就拿到这样一个目录结构：
test
├── [Content_Types].xml
├── _rels
├── docProps
│ ├── app.xml
│ ├── core.xml
│ └── custom.xml
└── xl
├── _rels
│ └── workbook.xml.rels
├── sharedStrings.xml
├── styles.xml
├── theme
│ └── theme1.xml
├── workbook.xml
└── worksheets
├── sheet1.xml
└── sheet2.xml啊哈，干得漂亮，居然全都是 xml 文件。
我们在打开 xml 一探究竟，可以看出有几个文件很显眼，就是 worksheets 下的 sheet1.xml 和 sheet2.xml，还有 workbook.xml，其他的 styles、theme 一看就是和样式有关系，_rels 感觉就是什么内部引用，我们先看看两个 sheet 的 xml 文件，看看猜测是否正确，贴下 sheet1.xml：
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>1 2 |
1 2 |
1 2 |
1 2 |
相信大家已经看出来了，sheetData 就是 excel 表格中的数据了，
此外还有几个很明显的属性如 dimension 可以看出是表格的大小范围，从 A1 cell 到 C7 cell 形成一个框。
而 workbook 中存储的则是 sheet 的信息：
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
剩下的几个 xml，大概看了一眼，存储的信息还算很清楚，比如：
知道了 excel 文件是如何存储数据的，那我们如何用 js 来解析它就很清楚了，主要分三步：
说干就干，那我们来实操一下：
关于 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 解析原理很简单，和 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 中的数据取出，然后按照内部的属性生成自己想要的数据格式即可。
excel 文件本质就是一个 zip 包，我们只需要通过 zip 解压、xml 解析、数据处理这三个步骤，即可使用 JS 读取到其中的数据，当然其中的细节还是很多的，不过如果只是简单的 excel 模版，不妨自己尝试一下。
- EOF -
