Web ではあまり見かけませんが、 Windows ネイティブアプリで、コピーした表を Excel に貼り付けるとスタイルが付いた状態になる機能をまれに見かけます。ブラウザからのコピーでも実現できないか試してみました。

一般的なスタイル

以下のような表をコピーして Excel に貼り付けると、色などの書式を維持したまま貼り付けができます。

列１	列２
A2	B2
A3	B3

これはコピーした時に HTML の情報がクリップボードに入り、それの CSS を Excel が見て反映しているためです。

特殊なスタイル

通常の CSS はブラウザからコピペでできるのですが、一部ブラウザからコピーでは対応していないスタイルがあります。例えば以下のようなものです。

• インデント
• 書式

こういった Excel 固有のスタイルは、通常の CSS では表現できないため専用のプロパティが用意されています。

プロパティ	スタイル
mso-char-indent-count	インデント
mso-number-format	書式

ベンダープレフィックスが mso– のプロパティです。通常ベンダープレフィックスは – から始まるのですがこれは特殊ですね。

この mso- から始まるプロパティはコピー時に欠損してしまうので、ブラウザ標準のコピー機能ではなく独自で実装する必要があります。

実装

jQuery では mso- スタイル付きの HTML を組み立てられなかったので、 今回は Cheerio を使いました。ソースはこちらに上げました。実装については特に特徴ないので説明は省きます。

サンプルはこちらです。JSON から変換する仕組みにしました。生成&コピーボタンを押すとコピーされます。Excel に貼り付けるとインデントや数値の書式も反映されていることが確認できると思います。

Excel アプリ以外

動作確認で気が付いたのですが、 mso- のスタイルは Excel Online では反映されないようです。通常の CSS やアプリ版では反映されます。少し使いどころが限られそうですね。

また Libre Office は単純な表の対応のみで、CSS のスタイルを反映する機能はないようです。

まとめ

Web アプリから Excel へ直接コピペができたら便利ですが、Excel ブックを生成して出力する方が汎用性が髙そうです。