jQueryだけでテーブルをエクセル・CSV出力できる！「TableExport」の紹介

・tableタグを簡単にエクセルやCSVに出力したい
・サーバではなく、jQueryでエクセル、ＣＳＶを出力させたい

画面に表示されているテーブル、一覧、リストをエクセルやＣＳＶとしてファイルに出力したいという要望はシステム開発をしているとたまに出てきます。

一時的に少しデータを加工して、ちょっと印刷したいので、エクセルで出力させたいや、CSVにしてちょっとデータを調べたいという時に便利です。

サーバサイドの処理をかかずに実装できるjQueryのライブラリがありますので、紹介します。

サンプルとサンプルソース

サンプル

デモ
No 店舗名 売り上げ 客数 客単価
1 A店舗 120,000 20 6,000
2 B店舗 100,000 10 10,000

ＣＳＶが文字化けする場合はこちら（外部のサイトに移動します）を実施すると正常に開けます。

空のhtmlファイル（demo.html等）を作成し、当ページのサンプルソースを貼り付けて、ブラウザで実行するとすぐに動作確認できます！
※ライブラリの取得・読込だけは別途必要です

sample-srcサンプルソース

ライブラリは自分でダウンロードして読み込ませてください。（「公式からダウンロードしてね」の部分です）

HTML / JavaScript / jQuery / css 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"><title>デモ</title>

  <!--   jQuery・bootstrapライブラリ読み込み -->
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!--  /jQuery・bootstrapライブラリ読み込み -->

  <!--  公式からダウンロードしてね -->
  <link rel="stylesheet" href="https://appsol-one.com/custom/456_table-export/css/tableexport.min.css">
  <script src="https://appsol-one.com/custom/456_table-export/xlsx.core.min.js"></script>
  <script src="https://appsol-one.com/custom/456_table-export/FileSaver.min.js"></script>
  <script src="https://appsol-one.com/custom/456_table-export/tableexport.min.js"></script>
  <!--  /公式からダウンロードしてね -->

</head>
<body>

<div class="">
  <table id="table" class="border table text-center  " >
  <caption class=" tableexport-caption" style="caption-side: bottom;"></caption>
  <thead>
	<tr>
		<th>No</th>
		<th>店舗名</th>
		<th>売り上げ</th>
		<th>客数</th>
		<th>客単価</th>
	</tr>
  </thead>
	<tr>
		<td>1</td>
		<td>A店舗</td>
		<td>120,000</td>
		<td>20</td>
		<td>6,000</td>
	</tr>
	<tr>
		<td>2</td>
		<td>B店舗</td>
		<td>100,000</td>
		<td>10</td>
		<td>10,000</td>
	</tr>
  </table>
</div>


<!-- ############ javascript  ############ -->
<script type="text/javascript">

$(function(){
	$("#table").tableExport({
		formats: ["xlsx",  "csv",  "txt"],  //エクスポートする形式
		bootstrap: true //Bootstrapを利用するかどうか
	});
});
</script>
<!-- ############ /javascript  ############ -->


</body>
</html>

公式サイト

公式サイトはこちらです。
https://tableexport.v5.travismclarke.com/

導入方法

１、ライブラリをダウンロード・必要ファイル取得

ダウンロードする場所が3か所もありますので、少し大変です。

【１】tableExport関連

ダウンロード先は以下です。
https://github.com/clarketm/TableExport

ダウンロード後、以下の3つを取得しましょう
/dist/tableExport.js
/dist/css/tableexport.min.css
/dist/imgフォルダ

【２】FileSaver関連

ダウンロード先は以下です。
https://github.com/eligrey/FileSaver.js/

ダウンロード後、以下を取得しましょう
FileSaver.min.js

【３】xlsx関連

ダウンロード先は以下です。
https://github.com/SheetJS/sheetjs

ダウンロード後、以下を取得しましょう
xlsx.core.min.js

２、ソース作成

tableExport.js
/css/tableexport.min.css
/imgフォルダ
FileSaver.min.js
xlsx.core.min.js

上記を読み込むようにし、当ページのサンプルソースを使えば、完成です！

※ただし、「tableexport.min.css」はcssフォルダというフォルダを作成し、その中に配備してください。また、cssフォルダと同じ階層にimgフォルダを配備しましょう。cssの中で、imgフォルダの相対パスが指定されてますので、ファイルの配置構成によって正しく表示されないので、注意してください。

解説

１、普通にテーブル作成


まずはtableタグ、thタグ、trタグ、tdタグを使ってテーブル作成します。

２、tableタグ要素で「tableExportメソッド」を実行

<script type="text/javascript">
$(function(){
	$("#table").tableExport({
		formats: ["xlsx",  "csv",  "txt"],  //エクスポートする形式
		bootstrap: false //Bootstrapを利用するかどうか
	});
});
</script>

tableタグに対して、「tableExport」メソッドを実行してください。
オプションとして「bootstrap」というのがあり、trueとfalseでボタンデザインが変わります。

bootstrap：trueの場合

bootstrap：falseの場合


３、補足

オプションも豊富にあるため、デザインの変更もある程度融通が利きそうです。
※以下、公式より引用

TableExport(document.getElementsByTagName("table"), {
  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: true)
  exportButtons: true,                // (Boolean), automatically generate the built-in export buttons for each of the specified formats (default: true)
  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)
  trimWhitespace: true,               // (Boolean), remove all leading/trailing newlines, spaces, and tabs from cell text in the exported file(s) (default: false)
  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')
});

まとめ

このライブラリを使えば、サーバサイドでエクセルやＣＳＶの出力処理を実装せずに簡単にファイルに保存ができるので、便利です。

納品書や請求書などの伝票を出力することが多いですが、たまにテーブルをそのまま出力したいという要望もありますので、そんなときにはこのライブラリを使うのも一つの選択肢になりそうですね。

よかったら、ＳＮＳでシェアして頂けると嬉しいです！
今後の励みにもなりますので、よろしくお願いします！

前の記事

操作性向上のライブラリパッケージ！「 jQuery UI 」の…

次の記事

写真をオシャレに自動配置「masonry」の紹介！グリッド形式…