使いやすい!HTMLテーブルをxlsx、csv、txt形式でダウンロードできるjQueryプラグイン「TableExport.js」

HTMLテーブルをxlsx、csv、txt形式でダウンロードできるjQueryプラグインを紹介します。

HTMLのテーブルをxlsx、csv、txt形式でダウンロードできるjQueryプラグイン「TableExport.js」
TableExport.js

TableExport.jsは、HTMLの表(table)に、ダウンロード機能を実装できるjQueryプラグインです。

まずは、デモページをご覧ください。

ダウンロードできるファイル形式は、xlsx、xls、csv、txtです。

AndoridやiOS、IE、Opera、Safariなどブラウザ対応もバッチリです。

対応ブラウザ

テーブルのダウンロード機能をさくっと実装したい、というときに便利です。

<thead><tbody><tfoot>も問題なく認識してくれ、ダウンロードファイル名も自由に変更できます。さらに、ダウンロードから除外する行や列、セルを指定することもできるなど、オプションも豊富です。

スポンサーリンク

使い方

サンプルページに実装してみました。

ダウンロード1(tableexport.css、tableexport.js)

公式ページの記事本文中、上の方にある「Download」ボタンからZIPファイルをダウンロードできます。

ダウンロード

ZIPファイルを展開したら、dist > css フォルダに入っている「tableexport.css」、dist > jsフォルダに入っている「tableexport.js」を使います。

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

さらに、FileSaver.jsというライブラリも必要です。これは、GitHub(FileSaver.js)からダウンロードできます。

右上の「Clone or download」 > 「Download ZIP」からダウンロードします。

FileSaver.js

ZIPファイルを展開したら、「FileSaver.js」というファイルを使います。

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

xlsx形式で出力する場合、xlsx.core.min.jsというライブラリも必要です。これは、GitHub(js-xlsx)からダウンロードできます。

右上の「Clone or download」 > 「Download ZIP」からダウンロードします。

ZIPファイルを展開したら、distフォルダに入っている、「xlsx.core.min.js」というファイルを使います。

ダウンロード4(Blob.js)

古いブラウザ(Firefox < 20, Opera < 15, Safari < 6)に対応する場合、Blob.jsというライブラリも必要です。古いブラウザのサポートが必要ないなら、このファイルは不要です。

これは、GitHub(Blob.js)からダウンロードできます。

右上の「Clone or download」 > 「Download ZIP」からダウンロードします。

ZIPファイルを展開したら、distフォルダに入っている、「Blob.js」というファイルを使います。

JS

jQuery、xlsx.core.min.js、Blob.js、FileSaver.js、tableexport.jsを読み込みます。

CSS

tableexport.cssを読み込みます。

HTML

普通にtableを用意します。

JS実行

スクリプトを実行します。</body>閉じタグの直前などに記述します。

bootstrapを使っている場合は、「bootstrap: true」とすると、ボタンのデザインがこのようにおしゃれになります。

ボタン

オプション

オプションも色々と用意されています。

  • headings // <thead>をダウンロードに含める/含めないをtrue/falseで指定します。
  • footers // <tfoot>をダウンロードに含める/含めないをtrue/falseで指定します
  • formats // ダウンロードボタンを表示する拡張子を指定します。
  • fileName // ダウンロードファイルの名前を指定します。「id」を指定すれば、tableのid名がファイル名になります。「id」以外を指定すれば、それがファイル名になります。日本語OKです。
  • bootstrap // ボタンのデザインにbootstrapを使う/使わないをtrue/falseで指定します。
  • position // ボタンの位置をtop/bottomで指定します。
  • ignoreRows // ダウンロードファイルから除外する行数を数値で指定します。複数ある場合は、「[2,4]」のように、「[]」で囲って、「,」カンマ区切りで指定します。尚、行数は「0」始まりなので、普通の1行目が0行目になります。
  • ignoreCols // ダウンロードファイルから除外する列数を数値で指定します。複数ある場合は、「[2,4]」のように、「[]」で囲って、「,」カンマ区切りで指定します。尚、列数は「0」始まりなので、普通の1列目が0列目になります。
  • ignoreCSS // クラスを指定すると、そのクラスがついているセルをダウンロードから除外できます。複数指定の場合は、「[.ignore1,.ignore2]」のように、「[]」で囲って、「,」カンマ区切りで指定します。

まとめ

HTMLテーブルのダウンロード機能を実装できるjQueryプラグイン「TableExport.js」の紹介でした。テーブルのダウンロード機能をさくっと実装できるので便利です。

xlsx形式でのダウンロード機能が欲しい!という要望がたまにありますが、フロントサイドだけで実装できるので、いざというときに役に立つプラグインです。

スポンサーリンク

みんなが見ている記事

コメントを投稿する

  • Posted on 2016.06.11
  • Views 2,257