大家好,很高興又見面了,我是"進階前端進階",由我帶着大家一起關注前端前沿、深入前端底層技術,大家一起進步,也歡迎大家關注、點贊、收藏、轉發!
進階前端進階
前言
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的典型特性包括:
- 高相容: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方式: <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/