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アナリティクスタグは流用しないで下さい。
