JavaScript で table の内容を clipboard にコピー

はじめに

あまり需要はないと思いますが描画されているDOM要素のテキストをクリップボードにコピーしたい事象があったので作成しました。

実際の処理

サンプルのソースはこちらから

html は以下

<button id="js-button">クリップボードにコピー</button>
<table>
  <thead>
    <tr>
      <th>id</th><th>名前</th><th>性別</th><th>年齢</th>
    </tr>
  </thead>
  <tbody id="js-tbody"><!-- 今回はbodyの中身だけをコピーする -->
    <tr>
      <td>1</td><td>佐藤</td><td></td><td>43</td>
    </tr>
    <tr>
      <td>2</td><td>鈴木</td><td></td><td>32</td>
    </tr>
    <tr>
      <td>3</td><td>高橋</td><td></td><td>25</td>
    </tr>
  </tbody>
</table>
HTML

JavaScript は以下


// 要素を取得
var $button = document.getElementById('js-button');
var $tbody = document.getElementById('js-tbody');

$button.addEventListener('click', () => {
  // 選択エリアを定義
  var range = document.createRange();
  range.selectNodeContents($tbody);

  // 選択
  window.getSelection().addRange(range);

  // クリップボードにコピー
  document.execCommand('copy');

  // 選択解除
  window.getSelection().removeRange(range);
});
JavaScript

処理の流れとしてはコピーしたいテキストを含む要素を取得して、選択のエリアを定義します。
その後getSelection().addRange()で選択を行いその状態をクリップボードにコピーします。
選択解除はなくてもよいけど、行わないとテキストが反転選択された状態が残ってしまうので一応入れています。

以上でクリップボードへのコピーは完了です。