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.jsを使用してWebページの表をxlsx、csv、txtファイルでダウンロードする方法を詳しく説明しました。tableexport.jsを読み込み、ダウンロードボタンを作成し、ダウンロード対象の表を準備することで、簡単に表データをエクスポートできます。tableexport.jsはカスタマイズ可能なオプションも提供しており、より高度な設定やスタイリングが必要な場合にも対応しています。ぜひこの手順を試してみてください。
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。