JavaScript

tableexport.jsを使ってWebページの表(table)をxlsx、csv、txtファイルでダウンロードする方法

tableexport.jsを使ってWebページの表(table)をxlsx、csv、txtファイルでダウンロードする方法をご紹介します。

tableexport.jsとは

Webページ上に表示されている表(table要素)を、xlsx、csv、txtなどのファイル形式でダウンロードする必要がある場合、tableexport.jsという便利なJavaScriptライブラリがあります。
この記事では、tableexport.jsを使用してWebページの表を指定した形式でダウンロードする手順を詳しく説明します。

表(table)のCSS記述

※表の「table」「table th,table td」のCSSを記述します。必要に応じて変更して下さい。

<style>
body {
  font-size: 16px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 1.6em;
  padding: 20px 0;
}
p{
  padding-bottom: 20px;
}
table{
  margin: 0 auto;
}
table th,
table td{
  border: solid 1px #cccccc;
  padding: 4px;
}
</style>

表(table)の準備(HTML記述)

※ダウンロードする表をHTMLで作成する必要があります。tableタグ要素(id=”default-table”)を使用して表を定義し、必要なヘッダーとデータを追加します。例えば以下のような表を記述します。

<h1>tableexport.jsを使ってWebページの表(table)をxlsx、csv、txtファイルでダウンロード</h1>
<p>以下の表の下にあるボタン「Export to xlsx」「Export to csv」「Export to txt」をクリックするとxlsx、csv、txtファイルで表をダウンロードします。</p>

<article>
    <table id="default-table" width="50%">
        <thead>
        <tr>
            <th>名前</th>
            <th>役職</th>
            <th>年齢</th>
            <th>戦闘力</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>神奈川 ケンタ</td>
            <td>ディレクター</td>
            <td>45</td>
            <td>500</td>
        </tr>
        <tr>
            <td>東京 太郎</td>
            <td>プログラマー</td>
            <td>30</td>
            <td>750</td>
        </tr>
        <tr>
            <td>福岡 泰子</td>
            <td>デザイナー</td>
            <td>28</td>
            <td>800</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td class="disabled"></td>
            <td class="disabled"></td>
            <th>合計</th>
            <th>2,050</th>
        </tr>
        </tfoot>
    </table>
</article>

tableexport.jsを使ってWebページの表(table)をxlsx、csv、txtファイルでダウンロードするJavaScriptの記述

※xlsx.core.min.js、FileSaver.js、tableexport.min.jsファイルを読み込みます。
以下のコードでは、ダウンロードボタン「Export to xlsx」「Export to csv」「Export to txt」がクリックされたときに表(id=”default-table”)をxlsx、csv、txtファイルでダウンロードします。TableExportオブジェクトを作成し、指定された形式に基づいて表をエクスポートします。

<script type="text/javascript" src="xlsx.core.min.js"></script>
<script type="text/javascript" src="FileSaver.js"></script>
<script type="text/javascript" src="tableexport.min.js"></script>
<script>

    var DefaultTable = document.getElementById('default-table');
    new TableExport(DefaultTable, {
        headers: true,                              // (Boolean), display table headers (th or td elements) in the <thead>, (default: true)
        footers: true,                              // (Boolean), display table footers (th or td elements) in the <tfoot>, (default: false)
        formats: ['xlsx', 'csv', 'txt'],            // (String[]), filetype(s) for the export, (default: ['xlsx', 'csv', 'txt'])
        filename: 'id',                             // (id, String), filename for the downloaded file, (default: 'id')
        bootstrap: false,                           // (Boolean), style buttons using bootstrap, (default: false)
        position: 'bottom',                         // (top, bottom), position of the caption element relative to table, (default: 'bottom')
        ignoreRows: null,                           // (Number, Number[]), row indices to exclude from the exported file(s) (default: null)
        ignoreCols: null,                           // (Number, Number[]), column indices to exclude from the exported file(s) (default: null)
        ignoreCSS: '.tableexport-ignore',           // (selector, selector[]), selector(s) to exclude cells from the exported file(s) (default: '.tableexport-ignore')
        emptyCSS: '.tableexport-empty',             // (selector, selector[]), selector(s) to replace cells with an empty string in the exported file(s) (default: '.tableexport-empty')
        trimWhitespace: true,                       // (Boolean), remove all leading/trailing newlines, spaces, and tabs from cell text in the exported file(s) (default: true)
        RTL: false,                                 // (Boolean), set direction of the worksheet to right-to-left (default: false)
        sheetname: 'id'                             // (id, String), sheet name for the exported spreadsheet, (default: 'id')
    });

</script>

formatsプロパティには、ダウンロードする形式を指定します(xlsx、csv、txtのいずれか)。filenameプロパティは、ダウンロードされるファイルの名前を指定します。

以上で準備が整いました。Webページ上の表をxlsx、csv、txtファイルとしてダウンロードする準備ができました。ダウンロードボタンをクリックすると、指定された形式で表がダウンロードされます。

tableexport.jsを使ってWebページの表(table)をxlsx、csv、txtファイルでダウンロードするデモページ

tableexport.jsを使ってWebページの表(table)をxlsx、csv、txtファイルでダウンロードするデモページ

ソース元:TableExport

TableExport

まとめ

この記事では、tableexport.jsを使用してWebページの表をxlsx、csv、txtファイルでダウンロードする方法を詳しく説明しました。tableexport.jsを読み込み、ダウンロードボタンを作成し、ダウンロード対象の表を準備することで、簡単に表データをエクスポートできます。tableexport.jsはカスタマイズ可能なオプションも提供しており、より高度な設定やスタイリングが必要な場合にも対応しています。ぜひこの手順を試してみてください。

 

※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。