AMG Solution

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

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

フォルダ階層

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

 test3
   |- index.html
   |- css
     |- bootstrap.min.css
     |- tableexport.min.css
   |- js
     |- jquery.js
     |- test.js
     |- FileSaver.min.js
     |- tableexport.min.js
     |- xlsx.core.min.js
   |- img
     |- 各種イメージファイル

HTMLファイル

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

– index.html

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

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

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

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

JSファイル

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

– test.js

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

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

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

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

実行結果

– 画面起動時
33a-1

– 各ファイルダウンロード
33a-2

– XLS・XLSX中身
33a-3

– CSV中身
33a-4

– TEXT中身
33a-5

最後に

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

それではまた。

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

HIGUCHI'S BLOG

樋口一成の記事

樋口一成の記事の最新情報をお届けいたします。

SAME CATEGORY BLOG

この記事と同様のカテゴリー記事

新卒採用
はじめました。
LOADING