[Clipboard] クリップボードにコピー

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>
<script src="https://cdn.grapecity.com/samples/wijmo/jp/scripts/sample.js"></script>
<div class="container">

  <h1>クリップボードにコピー</h1>
  <p>JavaScriptでは、「<a href="https://developer.mozilla.org/ja/docs/Web/API/Document/execCommand">document.execCommand</a>('copy')」を実行すると文字列をクリップボードにコピーすることができますが、あらかじめコピーする文字列を選択する必要があります。</p>
  <p>Wijmoの<a href="http://wijmo.c1.grapecity.com/5/docs/topic/wijmo.Clipboard.Class.html#copy">Clipboard.copy</a>メソッドを実行すると、文字列を選択しなくても、任意の文字列をクリップボードにコピーすることができます。</p>
  <p>このサンプルでは、文字列とHTMLテーブルをクリップボードにコピーします。HTMLテーブルは、ExcelにペーストできるようにTSV（タブ区切り）形式の文字列に変換してコピーします。</p>

  <form name="form" class="form-inline">
    <button name="copyString" type="button" class="btn btn-default">文字列をコピー</button>
    <button name="copyTable" type="button" class="btn btn-default">テーブルをコピー</button>
  </form>

  <table class="table table-striped">
    <thead>
      <tr>
        <th class="col-xs-2">No</th>
        <th class="col-xs-4">商品名</th>
        <th class="col-xs-3">受注日</th>
        <th class="col-xs-3">金額</th>
      </tr>
    </thead>
    <tbody id='tbody'>
    </tbody>
  </table>
</div>

JavaScript

document.form.copyString.addEventListener('click', function (e) {
  wijmo.Clipboard.copy('コピーした文字列');
  document.execCommand("copy");
});
document.form.copyTable.addEventListener('click', function (e) {
  wijmo.Clipboard.copy(tsv);
  document.execCommand("copy");
});

// テーブルを作成します。
var data = sample.orders();
for (var i = 0; i < data.length; i++) {
  var row = tbody.insertRow();
  row.innerHTML = wijmo.format('<tr><td>{No}</td><td>{商品名}</td><td>{受注日:d}</td><td>{金額:c}</td></tr>', data[i]);
}

// テーブルをTSV形式の文字列に変換します。
var tsv = '';
tsv += 'No\t商品名\t受注日\t金額\n';
for (var i = 0; i < data.length; i++) {
  tsv += wijmo.format('{No}\t{商品名}\t{受注日:d}\t{金額:c}', data[i]) + '\n';
}
tsv = tsv.replace(/\n$/,'');