前端解析 Excel 文件 & 字符集简介

前端如何解析 excel 文件？当然是用库啊 ~

Excel 解析

需求背景

目前项目中添加资源通常是一条一条手动创建的，当需要创建的资源数量很大时，非常影响用户体验：

每次添加都需要打开创建弹窗 => 填写数据 => 点击保存 => 等待创建，消耗大量时间。
不能一次性查看全部数据，调整优先级或排序。
在友商配置的资源通常是批量导出到 csv 文件中，无法轻量迁移。

因此需要增加一个批量导入的功能来节省用户时间，流程如下：

使用 Sheet JS 实现

Sheet JS 官网给出的解析流程如下图所示：

使用 FileReader.readAsArrayBuffer 读取本地文件。
使用 XLSX.read 方法，将 ArrayBuffer 读取为 workbook。
使用 sheet_to_json 方法转换为 JSON 数据。

ini 复制代码

// 解析文件
var reader = new FileReader();
reader.onload = function(e) {
    var data = e.target.result
    var workbook = XLSX.read(data, { type: 'binary' });// 获取第一张表
    var first_sheet_name = workbook.SheetNames[0];
    var worksheet = workbook.Sheets[first_sheet_name];// 将表单数据转换为 JSON 对象
    var jsonData = XLSX.utils.sheet_to_json(worksheet, { defval: "" });// 输出 JSON 
};
// 
reader.readAsBinaryString(f);

导入 .xlsx 文件时岁月静好，当尝试导入 .csv 文件时就全部乱码了！

为什么 .csv 会乱码？

.csv 文件是一种纯文本文件，它的编码方式可能是 ASCII、UTF-8、GBK 或者其他。当使用不正确的编码方式去解析 .csv 文件时，中文字符可能出现乱码。而 .xlsx 文件是一种 XML-based 类型的文件，它包含了关于字符编码的信息，所以 .xlsx 文件在处理中文字符时，通常不会出现乱码。

乱码怎么办

这里我们分为三种类型：.xlsx 文件、UTF-8 编码的 .csv 文件，和非 UTF-8 编码的 .csv 文件。

首先来看一下 FileReader 中 readAsText, readAsBinaryString, readAsArrayBuffer 这三个方法的区别

readAsText: 这个方法是以文本形式读取指定的Blob或File对象。结果数据是以字符串（UTF-8格式）的形式返回的。这种方式适合读取纯文本文件，如.txt、.csv、.xml、.html等。
readAsBinaryString: 这个方法是以二进制字符串的形式读取指定的Blob或File对象，这种方法适合读取的文件类型主要有：
- 图片文件：JPEG、PNG、GIF、SVG、BMP等。
- 文档文件：PDF、DOCX、PPTX、XLSX等。
- 音频和视频文件：MP3、MP4、WAV、OGG、FLAC等。
- 压缩文件：ZIP、RAR、7Z、TAR等。
- 数据库文件：例如 SQLite 数据库。
- 二进制可执行文件：EXE、DMG等。
readAsArrayBuffer: 是以 ArrayBuffer 的形式读取 Blob 或 File 对象，储存的是二进制数据的数值，而不是字符串或者文本，所以适合在需要进行数值处理和大量数据处理的场景中使用。比如你需要读取文件并对这个文件的数据进行修改，就可以使用该方法。

我们对这三种类型的文件使用不同的方法解析：

解析.xlsx

因为 .xlsx 是一个复杂的文件格式，它实际上是一个包含了多个 XML 文件的 ZIP 。而这些 XML 文件都是以 UTF-8 编码格式存储的。所以，在处理.xlsx文件时通常不需要担心字符编码的问题。直接用 binary string 的格式将文件读入，然后再调用 xlsx.js 来按格式解析就好。

ini 复制代码

const reader = new FileReader();
reader.onload = function(event) {
    const data = event.target.result;
    // 以二进制形式解析
    workbook = read(data, { type: 'binary' })
    const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
    const json = utils.sheet_to_json(firstSheet);
};
// 以二进制字符串的形式读取文件
reader.readAsBinaryString(file);

解析 UTF-8 编码的 .csv 文件

由于文件的内容是纯文本的，所以我们直接使用 'string' 类型来读取和解析文件即可。

ini 复制代码

const reader = new FileReader();
reader.onload = function(event) {
    const data = event.target.result;
    // 以二进制形式解析
    workbook = read(data, { type: 'string' })
    const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
    const json = utils.sheet_to_json(firstSheet);
};
// 以二进制字符串的形式读取文件
reader.readAsText(file, 'UTF-8');

解析非 UTF-8 编码的 .csv 文件（以GB-2312为例）

ini 复制代码

const reader = new FileReader();
reader.onload = function(event) {
    const buffer = event.target.result;
    const unit8 = new Unit8Array(buffer);
    // 转换为unicode
    const unicodeStr = cptable.utils.decode(936, uint8Array)
    workbook = read(unicodeStr, { type: 'string' })
};
// 以二进制字符串的形式读取文件
reader.readAsArrayBuffer(file, 'UTF-8');

Excel 文件的编码介绍

Open XML 标准

大家是否思考过一个问题，为什么你创建了一个 excel / word 之后，既可以使用 Office 软件打开，也可以使用 WPS 打开。是因为这些文件都遵循同一套标准，叫做Microsoft Office Open XML 标准。

.xlsx 文件结构

上面提到，解析 .xlsx 文件不会乱码的原因是， .xlsx 文件包含了关于字符编码的信息。那么它是在哪里包含的呢?

比如我们有一个源文件：

.xlsx 文件是一种基于 XML 的文件格式，通常包含多个 XML 文件和一些附加的文件，这些文件压缩成一个 .zip 文件。我们把源文件后缀改成 .zip 后解压缩，就可以得到这样一个文件夹。

结构如下：

csharp 复制代码

UTF8_副本.xlsx/
    _rels/
    docProps/
    xl/
        _rels/
        theme/
        worksheets/
            sheet1.xml
        workbook.xml
        styles.xml
        sharedStrings.xml
    [Content_Types].xml

在这些 XML 文件中，通常使用的编码是 UTF-8 或 UTF-16。在这些 XML 文件的头部可以看到表示编码格式的声明，比如：

xml 复制代码

<?xml version="1.0" encoding="UTF-8"?>

接下来我们来看看这些文件里写了什么东西。

前端解析 Excel 文件 & 字符集简介

Excel 解析

需求背景

使用 Sheet JS 实现

乱码怎么办

解析.xlsx

解析 UTF-8 编码的 .csv 文件

解析非 UTF-8 编码的 .csv 文件（以GB-2312为例）

Excel 文件的编码介绍

Open XML 标准

.xlsx 文件结构

[Content_types].xml