h5页面如何预览excel文件_Javascript 是如何解析 Excel 文件的？

最近要做一个导入导出 Excel 的功能，上一次做这个功能的时候，还是用的 Java Apache POI，这是一个用 Java 编写的免费开源的跨平台的 Java API，能够对 Microsoft Office 格式文件进行读和写。整体感受就是，做简单场景的 Excel 导入导出还可以，但是如果需要加一些复杂交互功能的话，前后端交互就比较繁琐了，可能需要来来回回好几次请求（比如字段映射，预览，隐藏行列等场景）。

去网上查了下，发下了一个叫做 sheetjs 的前端库，号称是一个用于多种电子表格格式的解析器和编写器，github 上的使用文档很全。大概使用了下，功能确实强大，感慨作者 NB 的同时，顺带看看这么神奇的功能是如何实现的。

本文为大家讲解 Excel 文档的解析方法，所涉及到的代码都来自 sheetjs 源码。

Excel 解析原理

我新建了一个名称为 “user.xlsx” 的 Excel 文件，在 Sheet1 上建立了如下表格，然后保存。

|    A       B          C         D       E
__|_______________________________________________
1 |  Name     Age     Birthday    Hobby           
__|_______________________________________________
2 |  Tom      29      1901/7/7    Music   Football
__|_______________________________________________
  |

xlsx 文件是个二进制文件，使用文本解析的方式只能得到一大堆乱码，那 JS 是如何解析这个文件呢？微软的官方网站有一篇文章 Word, Excel, and PowerPoint Standards Support 中说明了 Word、 Excel 和 PowerPoint 遵循 Open Document Format (ODF) 和 Open XML 协议，并给出了协议的主要约定。

Excel（.xlsx）文件格式遵循的是 Office Open XML 规范，这个规范最初是 Office 2007 产品开发的技术规范，现已成为国际文档格式标准[ISO / IEC-29500-3]。

简而言之，Excel（.xlsx）文件是遵循某种规范的 XML 文件集合。

是不是感觉那里有点不对劲，xml 是个文本协议，而 xlsx 文件明明是个二进制文件，怎么都挨不到一块去。

那是因为，Excel（.xlsx）文件是 XML 文件集合经过 zip 打包后的结果。

Excel（.xlsx）文件可以通过压缩软件进行解压缩。以 user.xlsx 为例，解压缩后得到如下文件夹。

|-- user
    |-- _rels
        |-- .rels
    |-- docProps
        |-- app.xml
        |-- core.xml
    |-- xl
        |-- _rels
            |-- workbook.xml.rels
        |-- printerSettings
            |-- printerSettings1.bin
            |-- printerSettings2.bin
            |-- printerSettings3.bin
        |-- theme
            |-- theme1.xml
        |-- worksheets
            |-- sheet1.xml
            |-- sheet2.xml
            |-- sheet3.xml
        |-- sharedStrings.xml
        |-- styles.xml
        |-- workbook.xml
    |-- [Content_Types].xml

可以看出，Excel（.xlsx）文件经过解压后得到同名文件夹，文件夹中按照一定的规则放置了一些 XML 文档。XML 是一种标记语言，很类似 HTML。此时我们解析 xlsx 文件变成了按照 Open XML 协议的规定解析 XML 文件，难度大大降低。

我们回过头来看看 sheetjs 读取 Excel（.xlsx） 文件逻辑，上传一个 Excel 文件后，sheetjs 会调用 readSync 方法读取这个二进制流。通常，压缩文件包括文件头信息 + 文件压缩数据，其中，文件头信息可以用来确定这个文件的类型，ZIP 文件的文件头是 0X04034B50，只要满足这个头，那文件就是 ZIP 压缩文件。

function readSync(data, opts) {
    
  ...
  switch((n = firstbyte(d, o))[0]) {
    
    case 0x50: return (n[1] === 0x4B && n[2] < 0x09 && n[3] < 0x09) ? read_zip(d, o) : read_prn(data, d, o, str);
    ...
  }
  ...
}

function read_zip(data, opts) {
    
  var zip, d = data;
    var o = opts||{};
    if(!o.type) o.type = (has_buf && Buffer.isBuffer(data)) ? "buffer" : "base64";
    zip = zip_read(d, o);
    return parse_zip(zip, o);
}

所以，sheetjs 将这个 Excel 文件 zip 解压后，得到一个同名文件夹和若干 XML 文件，后续它会解析这些 XML 文件，这就是 JS 解析 Excel 文件的原理。

Excel 解析流程

Excel 文件解析流程实际上是 JavaScript 语言实现 Office Open XML 规范的过程。目前这个规范已经是国际标准了，详见 I