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 プロパティを上書きしてしまっても問題ないと思います。

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