前言

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 Excel™ 2007 及以上版本创建的电子表格文档。

Excelize的logo

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

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

前端表格(在线表格再添一员猛将excelize，支持 wasm！)

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

Excelize-wasm 浏览器支持

前端如何使用Excelize

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

npm install --save excelize-wasm//CDN方式： [xss_clean][xss_clean]

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

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);    }  });});