大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

前言

Excel 是电子表格的代名词，在最初的 Macintosh 上推出数十年后，Excel 仍然是最强大的电子表格应用程序，它已不再只是一个简单的桌面应用程序。 现在，开发者可以在 Windows、Mac、iOS、Android 甚至 Web 上使用 Excel。而本文将围绕在线电子表格的一个优秀解决方案excelize展开。

其实，在线表格是前端绕不开的永久话题，在日常开发中都或多或少的有类似的产品、技术述求。以前也单独发文介绍过不同的在线表格解决方案，如下面是已经发布文章的传送门：

• 《 语雀弃用SpreadJs？在线表格Handsontable如何？ 》
• 《 语雀弃用SpreadJs？2023年前端表格 4+ 优秀热门方案！ 》
• 《 「续」语雀弃用SpreadJs？2023年前端表格4+热门方案！ 》

而本文将围绕在线表格解决方案 excelize 展开，目前 excelize 甚至已经提供了 WebAssembly 版本，支持了众多浏览器生态，这其中就包括了桌面、移动浏览器。

什么是excelize

Excelize 是 Go 语言编写的用于操作 Office Excel 文档基础库，基于 ECMA-376，ISO/IEC 29500 国际标准。可以使用 Excelize 来读取、写入由 Microsoft ExcelTM 2007 及以上版本创建的电子表格文档。

Excelize 支持 XLAM / XLSM / XLSX / XLTM / XLTX 等多种文档格式，高度兼容带有样式、图片(表)、透视表、切片器等复杂组件的文档，并提供流式读写 API，用于处理包含大规模数据的工作簿。可应用于各类报表平台、云计算、边缘计算等系统。当然，使用Excelize 要求使用的 Go 语言为 1.16 或更高版本。

Excelize 的目标是创建并维护一个 Go 语言版本的 Excel 文档 API，以处理符合基于 Office Open XML（OOXML）标准的电子表格文档，借助 Excelize 开发者可以使用 Go 读取和写入 MS Excel 文件。

Excelize的典型特性包括：

• 高兼容：Excelize 是一个用纯 Go 编写的库，它提供了一组函数，允许您写入和读取 XLAM / XLSM / XLSX / XLTM / XLTX 文件。
• 高性能：Excelize 提供了流式 API，用于从具有大量数据的工作表中生成或读取数据。
• 复杂的组件支持：使用 Excelize 图表生成和管理非常简单，开发者可以根据工作表中的数据构建图表，或者在工作表中根本没有任何数据的情况下生成图表。
• 跨平台：只需在 macOS、Linux 和 Windows 操作系统上轻松运行 Excelize。

目前 Excelize 在国内有众多大企业用户，包括：百度、360、网易、饿了么、阿里巴、亚马逊、饿了么等等。

前 Excelize 已经在 Github 开源，有超过 15.1k 的 star、1.5k 的 fork、超过 2.2 k 的项目依赖量，代码贡献者 167，是一个非常优秀的开源项目。

Excelize支持 wasm

以前写过一篇文章《盘点 2023 年排名前20的编程语言对 WebAssembly的支持》，重点介绍过 2023年那些语言已经支持 wasm，其中就包括 Go，而且已经非常完善（WASI）。

而 Excelize-wasm 是 Go Excelize 库的纯 WebAssembly / Javascript 端口，允许开发者写入和读取 XLAM / XLSM / XLSX / XLTM / XLTX 文件。

Excelize-wasm 支持读写 Microsoft ExcelTM 2007 及更高版本生成的电子表格文档。 通过高兼容性支持复杂的组件，前端开发通过NPM等包管理工具直接下载并使用即可。同时，Excelize-wasm具有很好的浏览器支持性，如：Chrome >=57、Edge >=16、Firefox>=52、Opera >=44、Node.js >=8.0.0、Deno >=1.0等等。

前端如何使用Excelize

前端如果需要使用 Excelize，可以通过 npm 安装或者通过CDN的方式快速引入相关资源。

npm install --save excelize-wasm
//CDN方式： <script src="excelize-wasm/index.js"></script>

然后可以直接在项目中使用，比如下面的例子是创建电子表格文件的最小示例用法。

const { init } = require('excelize-wasm');
const fs = require('fs');
init('./node_modules/excelize-wasm/excelize.wasm.gz').then((excelize) => {
  const f = excelize.NewFile();
  // 创建sheet
  const { index } = f.NewSheet('Sheet2');
  // 设置单元格的值
  f.SetCellValue('Sheet2', 'A2', 'Hello world.');
  f.SetCellValue('Sheet1', 'B2', 100);
  // 设置工作簿的活动工作表。
  f.SetActiveSheet(index);
  // 按给定路径保存电子表格。
  const { buffer, error } = f.WriteToBuffer();
  if (error) {
    console.log(error);
    return;
  }
  fs.writeFile('Book1.xlsx', buffer, 'binary', (error) => {
    if (error) {
      console.log(error);
    }
  });
});

下面示例展示了如何阅读电子表格的内容:

const { init } = require('excelize-wasm');
const fs = require('fs');
init('./node_modules/excelize-wasm/excelize.wasm.gz').then((excelize) => {
  const f = excelize.OpenReader(fs.readFileSync('Book1.xlsx'));
  // 设置单元格内容
  const ret1 = f.GetCellValue('Sheet1', 'B2');
  if (ret1.error) {
    console.log(ret1.error);
    return;
  }
  console.log(ret1.value);
  // 获取Sheet1的所有行的值
  const ret2 = f.GetRows('Sheet1');
  if (ret2.error) {
    console.log(ret2.error);
    return;
  }
  ret2.result.forEach((row) => {
    row.forEach((colCell) => {
      process.stdout.write(`${colCell}\t`);
    });
    console.log();
  });
});

下面给大家展示如何将图表添加到电子表格文件。使用 excelize-wasm 图表生成和管理非常简单，开发者可以根据工作表中的数据构建图表，也可以在工作表中根本没有任何数据的情况下生成图表。

比如下面的代码示例：

const { init } = require('excelize-wasm');
const fs = require('fs');
init('./node_modules/excelize-wasm/excelize.wasm.gz').then((excelize) => {
  const f = excelize.NewFile();
  [
    [null, 'Apple', 'Orange', 'Pear'],
    ['Small', 2, 3, 3],
    ['Normal', 5, 2, 4],
    ['Large', 6, 7, 8],
  ].forEach((row, idx) => {
    const ret1 = excelize.CoordinatesToCellName(1, idx + 1);
    if (ret1.error) {
      console.log(ret1.error);
      return;
    }
    const res2 = f.SetSheetRow('Sheet1', ret1.cell, row);
    if (res2.error) {
      console.log(res2.error);
      return;
    }
  });
  const ret3 = f.AddChart('Sheet1', 'E1', {
    Type: excelize.Col3DClustered,
    Series: [
      {
        Name: 'Sheet1!$A$2',
        Categories: 'Sheet1!$B$1:$D$1',
        Values: 'Sheet1!$B$2:$D$2',
      },
      {
        Name: 'Sheet1!$A$3',
        Categories: 'Sheet1!$B$1:$D$1',
        Values: 'Sheet1!$B$3:$D$3',
      },
      {
        Name: 'Sheet1!$A$4',
        Categories: 'Sheet1!$B$1:$D$1',
        Values: 'Sheet1!$B$4:$D$4',
      },
    ],
    Title: {
      Name: 'Fruit 3D Clustered Column Chart',
    },
  });
  if (ret3.error) {
    console.log(ret3.error);
    return;
  }
  // 表格保存到指定位置
  const { buffer, error } = f.WriteToBuffer();
  if (error) {
    console.log(error);
    return;
  }
  fs.writeFile('Book1.xlsx', buffer, 'binary', (error) => {
    if (error) {
      console.log(error);
    }
  });
});

下面示例将图片添加到电子表格文件：

const { init } = require('excelize-wasm');
const fs = require('fs');
init('./node_modules/excelize-wasm/excelize.wasm.gz').then((excelize) => {
  const f = excelize.OpenReader(fs.readFileSync('Book1.xlsx'));
  if (f.error) {
    console.log(f.error);
    return;
  }
  // 插入图片
  const ret1 = f.AddPictureFromBytes('Sheet1', 'A2', {
    Extension: '.png',
    File: fs.readFileSync('image.png'),
    Format: { AltText: 'Picture 1' },
  });
  if (ret1.error) {
    console.log(ret1.error);
    return;
  }
  //将图片插入带有缩放比例的工作表。
  const ret2 = f.AddPictureFromBytes('Sheet1', 'D2', {
    Extension: '.jpg',
    File: fs.readFileSync('image.jpg'),
    Format: { AltText: 'Picture 2', ScaleX: 0.5, ScaleY: 0.5 },
  });
  if (ret2.error) {
    console.log(ret2.error);
    return;
  }
  // 在具有打印支持的单元格中插入图片偏移量
  const ret3 = f.AddPictureFromBytes('Sheet1', 'H2', {
    Extension: '.gif',
    File: fs.readFileSync('image.gif'),
    Format: {
      AltText: 'Picture 3',
      OffsetX: 15,
      OffsetY: 10,
      PrintObject: true,
      LockAspectRatio: false,
      Locked: false,
    },
  });
  if (ret3.error) {
    console.log(ret3.error);
    return;
  }
  // Save spreadsheet by the given path.
  const { buffer, error } = f.WriteToBuffer();
  if (error) {
    console.log(error);
    return;
  }
  fs.writeFile('Book1.xlsx', buffer, 'binary', (error) => {
    if (error) {
      console.log(error);
    }
  });
});

本文总结

本文主要和大家介绍下前端表格解决方案 Excelize，相信通过本文的阅读，大家对Excelize会有一个初步的了解。在下次前端表格项目中也能有一个充分的、择优的考量！

因为篇幅有限，文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！

参考资料

https://github.com/xuri/excelize-wasm

https://github.com/qax-os/excelize

https://xuri.me/excelize/

https://xuri.me/excelize/zh-hans/