Sheetjs(xlsx)でスタイルを適用したExcelデータを出力する
#JavaScript
にメンテナンス済み

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