next .js(react)でテーブルをコピーする機能を作る

やりたいこと

コピーボタンを用意し、表示されている表をそのままコピーできる機能を作りたい。

これが（表示している表）

こう（コピーしてエクセルに貼り付け）

技術候補

navigator clipboard　

Document.execCommand()

react-copy-to-clipboard

選定結果

navigator clipboard
パッケージを導入せずに最も簡単にコピー機能を作成できるが、http通信に対応しておらず断念

Document.execCommand()
現在非推奨なので極力使いたくなかったが、こちらで決定

react-copy-to-clipboard
単純なコピー自体は実装できたが、複雑なコピーに対応できなそうだったので断念

実装

sampleTable.tsx

// コピー機能
const copyTable = async () => {
    const tableCompaniesCopy = tableRef.current

    const tableHeaderColunm = [
      '#',
      '会社',
      'ID',
      '項目１',
      '項目２',
      '項目３',
      '項目４',
      '項目５',
      '項目６',
      '項目７',
      '項目８\n'
    ]

    // 会社ごとコピー
    let companiesTable = tableHeaderColunm.join('\t');
    for (let i = 0; i < tableCompaniesCopy.rows.length; i++) {
      for (let j = 0; j < tableCompaniesCopy.rows[i].cells.length; j++) {
        const replacement = tableCompaniesCopy.rows[i].cells[j].innerText
        companiesTable += replacement + '\t'
      }
      companiesTable += '\n'
    }
    // コピー処理
    const copyTextarea = document.createElement('textarea');
    copyTextarea.value = totalTable + companiesTable;
    document.body.appendChild(copyTextarea);
    copyTextarea.select();
    document.execCommand('copy');
    copyTextarea.remove()
  }

// テーブル
return (
    <tbody ref={tableRef}>
    {summaries &&
      summaries.map((summary: Summary, index: number) => {
        return (
          <tr key={summary.id} className="h-36">
            <td className="text-xl">
              {index + 1}
            </td>
            <td className="text-xl">
              <p className="text-left">{summary.company}</p>
            </td>
            <td className="text-xl">
              {summary.id}
            </td>
            <td className="text-xl">
              <p className='text-right'>{summary.item1}</p>
            </td>
            <td className="text-xl">
              <p className='text-right'>{summary.item2}</p>
            </td>
            <td className="text-xl">
              <p className='text-right'>¥{summary.item3}</p>
            </td>
            <td className="text-xl">
              <p className='text-right'>{summary.item4}</p>
            </td>
            <td className="text-xl">
              <p className='text-right'>¥{summary.item5}</p>
            </td>
            <td className="text-xl">
              <p className='text-right'>{summary.item6}</p>
            </td>
            <td className="text-xl">
              <p className='text-right'>{summary.item7}</p>
            </td>
            <td className="text-xl">
              <p className='text-right'>{summary.item8}</p>
            </td>
          </tr>
        )
      })}
    </tbody>
)

まとめ

技術選定に一番時間がかかりました。
navigator clipboardを使えるように、ローカル環境もSSL化したいなと思いました。