在线表格再添一员猛将excelize，支持 wasm!
大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!
前言
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 支持 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 Excel? 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方式： 然后可以直接在项目中使用，比如下面的例子是创建电子表格文件的最小示例用法。
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/