jQueryライブラリを使用して、テーブル内のデータをXLS/XLSX/CSV/TEXT形式で簡単ダウンロード

こんにちは、樋口です。

今回は、テーブルタグ内の要素を簡単にダウンロードすることができる、jQueryライブラリ「TableExport.js」についてご紹介します。
このライブラリを使用すれば、テーブル要素の内容をファイルに簡単に落とすことができます。

今回は下記ライブラリを使用して説明をしていきます。

jQuery

1.10.2

TableExport.js

3.3.7

BootStrap

3.2.0

ライブラリの入手

tableExport.jquery.pluginは下記サイトよりダウンロードできます。

プラグイン名

tableExport.jquery.plugin

リンク

TableExport.jsダウンロード(GitHab)

ダウンロードファイル

tableExport.js
tableexport.min.css
imgフォルダ(BootStarp使用時アイコン表示のため)

※ imgフォルダは、cssの格納されているフォルダと同階層にフォルダを配置してください。
　BootStrapアイコン表示のため階層を合わせる必要があります。

また、本プラグインを使用する為FileSaver.jsをダウンロードしてきます。

プラグイン名

FileSaver.js

リンク

FileSaver.jsダウンロード(GitHab)

ダウンロードファイル

FileSaver.min.js

さらに、EXCELダウンロードの為xlsx.core.min.jsをダウンロードしてきます。

プラグイン名

xlsx.core.min.js

リンク

xlsx.core.min.jsダウンロード(GitHab)

ダウンロードファイル

xlsx.core.min.js

以上で、準備は完了です。

フォルダ階層

今回は、下記フォルダ階層でサンプルを作成していきます。

HTMLファイル

それでは、初めにテーブル要素を含んだのHTMLを作成します。

– index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,  initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>TableExport.jsサンプル</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/tableexport.min.css">
  </head>
  <body>  
    <div id="wrap">
      <div class="container">
        <div class="col-lg-12">
          <div class="form-group" style="margin-top: 40px;">
            <label style="font-size: 20px;">TableExport.jsサンプル</label>
          </div>
          <form class="form-signin" id="commentForm">
            <div  class="table-responsive">
              <table id="tableIDElem" class="table table-striped table-bordered">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>名前</th>
                    <th>アドレス</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>1</td>
                    <td>テスト太郎</td>
                    <td>aaa@a.com</td>
                  </tr>
                  <tr>
                    <td>3</td>
                    <td>テスト花子</td>
                    <td>bbb@b.com</td>
                  </tr>
                  <tr>
                    <td>3</td>
                    <td>テスト次郎</td>
                    <td>ccc@c.com</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </form>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="./js/jquery.js"></script>
    <script type="text/javascript" src="./js/xlsx.core.min.js"></script>
    <script type="text/javascript" src="./js/FileSaver.min.js"></script>
    <script type="text/javascript" src="./js/tableexport.min.js"></script>
    <script type="text/javascript" src="./js/test.js"></script>
  </body>
</html>

9行目：
　bootstrapのCSSを読み込みます。
　これにより、bootstrapのスタイルが有効となります。

10行目：
　tableexportのCSSを読み込みます。
　これにより、tableexportのスタイルが有効となります。

52行目～55行目：
　今回のtableexport使用に必要なJSファイルを読み込みます。

56行目：
　自作のJSファイルとなります。（tableexport使用のための、ソースを記載します。）

JSファイル

次に、ライブラリを有効にするためのJSファイルを作成します。

– test.js

(function(){

    $("#tableIDElem").tableExport({
        formats: ["xlsx",  "xls", "csv",  "txt"], 
		bootstrap: true
    });
})();

3行目：
　「$(“#tableIDElem”)」の部分で、tableExportを有効にしたいtable要素のIDを指定します。

4行目：
　「formats」の部分で、ダウンロードするファイルを指定します。

5行目：
　「bootstrap」の部分では、bootstrapを使用する場合は「true」使用しない場合は「false」を設定します。

以上で完了です。
本ライブラリを使用すれば、自動的にダウンロードボタンが表示されます。

実行結果

– 画面起動時

– 各ファイルダウンロード

– XLS・XLSX中身

– CSV中身

– TEXT中身

最後に

今回紹介したライブラリを使用すれば、テーブル要素の内容を簡単にファイルとして保存することができます。
使用のためのファイルダウンロードの手間はありますが、実装すれば便利ですので是非使用してみてください！
今後もjavaScriptの便利ライブラリについて紹介していけたらと思っています。

それではまた。

《関連記事》
jQueryライブラリを使用して、簡単Form項目の入力チェック実装
jQueryライブラリで、注釈を使用したチュートリアルページの簡単実装