あまり需要はないと思いますが描画されているDOM要素のテキストをクリップボードにコピーしたい事象があったので作成しました。
サンプルのソースはこちらから
<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
// 要素を取得
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()で選択を行いその状態をクリップボードにコピーします。
選択解除はなくてもよいけど、行わないとテキストが反転選択された状態が残ってしまうので一応入れています。
以上でクリップボードへのコピーは完了です。