Sheetjs(xlsx)でスタイルを適用したExcelデータを出力する

#JavaScript

2021年12月21日にメンテナンス済み

皆さんはSheetjs、活用されていますか？

独自にスプレッドシートを組み立てたり、HTMLのtable要素をそのままExcelとして出力できたりと、とても便利だと思います。

ただ、スタイル情報まで引き継ぐことができません。

設定なしに出力を行うと、エイリアスがバリバリの標準フォントで、セルの幅も考慮なしに出力されてしまいます。

今回はJavaScriptから、スタイル付きのExcelファイルを出力する方法を紹介します。

インストール

npmを使用する場合

npm i -D xlsx-js-style

ブラウザに直接登録する場合

こちらのリポジトリから、dist/xlsx.bundle.jsをダウンロードし、以下の方法で適用してください。

<script lang="javascript" src="xlsx.bundle.js"></script>

ソースコード

まずコードをご覧ください。サンプルはnpmを使用し、対象Excelデータのすべてのセルにスタイルを適用するケースです。

import xlsx from "xlsx-js-style";

const table = document.getElementById("tableタグのid");

const workbook = xlsx.utils.table_to_book(table);

// すべてのワークシートに適用
for (const sheet of Object.values(workbook.Sheets)) {
  for (const rangeName in sheet) {
    // 設定情報は操作しない
    if (rangeName.indexOf("!") === 0) {
      continue;
    }

    // スタイルを定義
    const s = sheet[rangeName]?.s || {};
    s.alignment = { vertical: "top" };
    s.font = { name: "Yu Gothic medium", sz: 12, color: { rgb: "223344" } };

    // スタイルを反映
    sheet[rangeName] = {
      ...sheet[rangeName],
      s,
    };
  }
}

xlsx.writeFile(workbook, `出力するファイル名.xlsx`);

解説

ライブラリのインポート

通常、以下のようにインポートしていたと思いますが、

import xlsx from "xlsx";

次のように書き換えます。

import xlsx from "xlsx-js-style";

スタイルの定義

実際にスタイルを適用しているのは以下の部分です。

const s = sheet[rangeName]?.s || {};
s.alignment = { vertical: "top" };
s.font = { name: "Yu Gothic medium", sz: 12, color: { rgb: "223344" } };

セルにスタイルを適用するには、セルオブジェクトに.sプロパティを追加し、その中に詳細な設定を記述していきます。

すでにプロパティが存在する可能性を考慮して前述したコードになっていますが、直接.sプロパティを上書きしてしまっても問題ないと思います。

各スタイルの記述方法は、リポジトリの説明文をご確認ください。