福野泰介の一日一創

表形式データの入力用カスタム要素（拡張タグ）として実装した「input-table」にスプレッドシート（表計算ソフト）でコピーしたものを貼り付けられると便利そう！

「input-table demo」 src on GitHub
できました！お使いの表計算ソフトでコピーした表を貼り付けてみてください。Excel、Numbers、Google Spread Sheetで動作を確認しています。未対応のアプリがあればIssuesでご連絡いただけるとうれしいです。

Clipboard APIを使って対応します。Excel、Numbers(Mac)では、onpase(e)イベント時の e.clipboardData は、DataTransfer のオブジェクトになっていてそのMIMEタイプを types プロパティーで確認できます。

Excel / Numbers:
['text/plain', 'text/html', 'text/rtf', 'Files']

Google Spread Sheets:
['text/plain', 'text/html', 'application/x-vnd.google-docs-embedded-grid_range_clip+wrapped', 'application/x-vnd.google-docs-internal-clip-id', 'application/x-vnd.google-spreadsheet-compact-table+json']

text/plainには、改行とタブ区切りのTSV形式で入っていますが、通常の文字のペーストと区別するため、text/rtf か application/x-vnd.google-spreadsheet-compact-table+json があるかで表形式ペーストするか決めています。

逆に、この形式でコピーすれば、表計算ソフトでペーストできる機能も追加できそう！

一歩一歩便利に、一日一創！

links
- CSV編集をブラウザで！ウェブコンポーネントinput-tableタグと高専プロコンオープンデータ
- 表計算ソフトとプログラミングのいいとこどりを狙おう、table-calc