🐥

excelize-wasmでもっと簡単にWasmでExcelファイルを生成する

2024/12/26に公開

先月(11月2日)から行われていた技術書典17にて，WebAssembly Cookbook vol.2[1] (新刊)を頒布しました．

こちらで第4章「ブラウザ上でExcelファイルを扱う」を寄稿させていただいています．GoでExcelファイルを生成するプログラムを作り，Wasmで実行する解説しています．

上記ではGoのプログラミングが必要になっていますが，今回はGoのプログラミングをしなくても簡単にWebAssemblyの力を使ってExcelファイルの生成ができる「excelize-wasm」を試していきます．

excelize-wasmとは

https://github.com/xuri/excelize-wasm
Go向けのExcelファイル向けのライブラリである「Excelize」をWebAssemblyとしてビルドしたものです．ビルド済みのWasmを読み込むことで，JavaScriptからWasmを経由してExcelizeのAPIを使うことができます．

先に紹介した同人誌の中ではWasmが使われているExcelファイル系のライブラリについて紹介ができなかったので，こちらで供養します．

ファイルの用意

今回，以下のようなディレクトリ構成でかつブラウザ上で動かす前提で試します．
また，READMEの通りになぞっていきます．

- root/
    - index.html
    - node_modules/
        - excelize-wasm

npmなどお好きなものでexcelize-wasmを取得してきます．

$ npm install excelize-wasm

HTMLを作成し，Wasmを読み込みます

<html>
<head>
<title>excelize-wasm</title>
<head>
    <script src="./node_modules/excelize-wasm/index.js">
</head>
<body>
    <script>
    function download() {
        excelizeWASM
        .init('./node_modules/excelize-wasm/excelize-wasm.wasm.gz')
        ...

Excelファイルを作成する処理を追加

...
function download() {
    excelizeWASM
    .init('./node_modules/excelize-wasm/excelize-wasm.wasm.gz')
    .then((exec) => {
        const f = excelize.NewFile();
        if (f.error) {
            return;
        }
        f.SetCellValue('Sheet1', 'A1;, 'Hello, World!');
        const { buffer, error } f.WriteToBuffer();
        if (error) {
            return;
        }

基本的な使い方としては，Excelizeのままになるので下記を参照してください．
https://xuri.me/excelize/ja/
上記コードでは単純にExcelファイルのSheet1のA1に「Hello, World!」を挿入しています．

作成したExcelファイルをダウンロードさせる処理を追加

        ...
        const { buffer, error } f.WriteToBuffer();
        if (error) {
            return;
        }
        const link = document.createElement('a');
        link.download = 'Book1.xlsx'
        link.href = URL.createObjectURL(
            new Blob([buffer], {
                type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
            })
        );
        link.click();

WriteToBuffer()で生成したExcelファイルのbytes Bufferを得ることができます．
ここは大元のGoとWasmで実装が少し異なっています．

JavaScriptでは，バイト列はUint8Arrayで表されます．そのため，JavaScript上で生成したバイト列を扱えるようにbytes.Bufferではなく，変換されています．

Webサーバから実行する

<div>
    <button onclick="download()">Download</button>
</div>

HTMLにシンプルにJavaScriptを実行する要素を追加し，Webサーバ上から動かすとWasm上でのExcelファイル生成とxlsxファイルのダウンロードが実行されます．

おわりに

今回はWasmのバイナリを実装してではなく，Wasmで実行することのできるライブラリを紹介しました．
excelize-wasm以外にも wasm-xlsxwriter や docx-rs など，多様なものが出てきています．
これからWasmのバイナリを作成できなくても，ライブラリを通じてますますWasmの活用事例が出てくるのではないかと期待しています．

excelize-wasmとは

ファイルの用意

おわりに

Discussion