HTMLで組んだテーブルをエクスポートできるjQueryプラグイン「TableExport.js」

2019.05.20　Posted by Coding_team

Webプログラミング

tecmemo1905
こんにちは、ウェブラボクリエイターズメモです。

今回はHTMLで組んだテーブルをエクスポートできるjQueryプラグイン「TableExport.js」を紹介したいと思います。
xlsx、csv、txtなどの形式にエクスポートできる非常に優れモノです。

まずは以下から一式ダウンロードしましょう。

GitHubの説明にも書いてありますが必要なライブラリがいくつかあり、「FileSaver.js」、xlsx形式でエクスポートしたい場合は「xlsx.core.js」もダウンロードします。
一応こちらもGitHubへのリンクを記載しときます。

→GitHub(FileSaver.js)
→GitHub(xlsx.core.js)

必要なものは揃いましたので実装していきます。

まずは任意の場所に各種ファイルを配置し、HTML内で読み込みます。
また、Bootstrap3にも対応しているのでそちらも同時に読み込みます。

■HTML<head>内

<link rel="stylesheet" href="css/tableexport.min.css">//tableexport用CSS、画像を読み込んでいるので任意の場所に設置
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" integrity="sha384-PmY9l28YgO4JwMKbTvgaS7XNZJ30MK9FAZjjzXtlqyZCqBY6X6bXIkM++IkyinN+" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap-theme.min.css" integrity="sha384-jzngWsPS6op3fgRCDTESqrEJwRKck+CILhJVO5VvaAZCq8JYf8HsR/HPpBOOPZfR" crossorigin="anonymous">

■HTML</body>上

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/FileSaver.min.js"></script>
<script src="js/xlsx.core.min.js"></script>
<script src="js/tableexport.min.js"></script>
<script>
$(function(){
	$("#table").tableExport({
		formats: ["xlsx",  "csv",  "txt"], //エクスポートする形式
		bootstrap: true //Bootstrapを利用するかどうか
	});
});
</script>

$(function(){

$("#table").tableExport({

formats: ["xlsx", "csv", "txt"], //エクスポートする形式

bootstrap: true //Bootstrapを利用するかどうか

});

</script>

HTMLのテーブルは以下のように書いてみました。

■HTMLテーブル部分

<table id="table">
	<thead>
		<tr>
			<th>見出し1</th>
			<th>見出し2</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>あ</td>
			<td>い</td>
		</tr>
		<tr>
			<td>う</td>
			<td>え</td>
		</tr>
		<tr>
			<td>お</td>
			<td>か</td>
		</tr>
	</tbody>
</table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

必要な記述は以上です。作成したDEMOは以下になります。

→DEMO

いかがでしょう、各種形式でエクスポートできるようになりましたね。
GitHubに利用できるオプションやメソッドが多数記載されてるので気になる方は見てみると良いでしょう。
jQueryプラグインで簡単に各種形式にエクスポートできる方法があるというのは知っていて損はないと思います。いずれ活躍する機会がありそうです。

では今回はこの辺で、以上ウェブラボクリエイターズメモでした。

関連記事こちらの記事も合わせてどうぞ。