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

皆さんは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プロパティを上書きしてしまっても問題ないと思います。
各スタイルの記述方法は、リポジトリの説明文をご確認ください。