天天看點

線上表格再添一員猛将excelize,支援 wasm!

作者:進階前端進階

大家好,很高興又見面了,我是"進階前端進階",由我帶着大家一起關注前端前沿、深入前端底層技術,大家一起進步,也歡迎大家關注、點贊、收藏、轉發!

線上表格再添一員猛将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,支援 wasm!

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!

而 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-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 圖表生成和管理非常簡單,開發者可以根據工作表中的資料建構圖表,也可以在工作表中根本沒有任何資料的情況下生成圖表。

線上表格再添一員猛将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/

繼續閱讀