使いやすい!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を読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="js/xlsx.core.min.js"></script>
<script src="js/Blob.js"></script>
<script src="js/FileSaver.js"></script>
<script src="js/tableexport.js"></script>

CSS

tableexport.cssを読み込みます。

<link href="css/tableexport.css"/ rel="stylesheet">

HTML

普通にtableを用意します。

<table>
  <thead>
    <tr><th>順位</th><th>国</th><th>一人当たりの名目GDP(USドル)</th></tr>
  </thead>
  <tbody>
    <tr><td>1位</td><td>ルクセンブルク</td><td>101,994</td></tr>
    <tr><td>2位</td><td>スイス</td><td>80,675</td></tr>
    <tr><td>3位</td><td>カタール</td><td>76,576</td></tr>
    <tr><td>4位</td><td>ノルウェー</td><td>74,822</td></tr>
    <tr><td>5位</td><td>マカオ</td><td>69,309</td></tr>
    <tr><td>6位</td><td>アメリカ</td><td>55,805</td></tr>
    <tr><td>7位</td><td>シンガポール</td><td>52,887</td></tr>
    <tr><td>8位</td><td>デンマーク</td><td>52,114</td></tr>
    <tr><td>9位</td><td>アイルランド</td><td>51,350</td></tr>
    <tr><td>10位</td><td>オーストラリア</td><td>50,961</td></tr>
    <tr><td>26位</td><td>日本</td><td>32,485</td></tr>
  </tbody>
</table>

JS実行

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

<script>
$("table").tableExport({
  formats: ["xlsx", "csv", "txt"],
  bootstrap: false
});
</script>

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

ボタン

オプション

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

/* Defaults */
$("table").tableExport({
    headings: true,                    // (Boolean), display table headings (th/td elements) in the <thead>
    footers: true,                     // (Boolean), display table footers (th/td elements) in the <tfoot>
    formats: ["xls", "csv", "txt"],    // (String[]), filetypes for the export
    fileName: "id",                    // (id, String), filename for the downloaded file
    bootstrap: true,                   // (Boolean), style buttons using bootstrap
    position: "bottom"                 // (top, bottom), position of the caption element relative to table
    ignoreRows: null,                  // (Number, Number[]), row indices to exclude from the exported file
    ignoreCols: null                   // (Number, Number[]), column indices to exclude from the exported file
    ignoreCSS: ".tableexport-ignore"   // (selector, selector[]), selector(s) to exclude from the exported file
});
  • 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形式でのダウンロード機能が欲しい!という要望がたまにありますが、フロントサイドだけで実装できるので、いざというときに役に立つプラグインです。

人気の記事

2017年、人気の無料WordPressテーマ100選
2017年、人気の無料WordPressテーマ100選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ3選
アドセンス運用に最適なWordPressテーマ3選

フリーランスITエンジニアの案件・求人情報サイト

フリーランスWebクリエイター大募集!「ギークスジョブ」

コメント

  • Posted on
  • Updated on
  • Views 3,961