2017年9月12日
HTMLのテーブルからCSVを作成する
Web画面からCSVを出力する手段の一つをご紹介します。
Webシステムで集計画面にCSVボタンを配置する場合があるかと思います。
その場合、よくある方法としましてはCSVボタン押下時に再度DBへ問い合わせ結果をCSV整形して取得し、
テキストへ出力するかと思います。
今回ご紹介するのは、今表示している集計情報(HTMLのテーブル)をそのままCSVへコンバートする方法です。
※リアルタイムではなくなりますが、DBアクセスを減らせるというメリットがあるかと思います。
考え方としましては非常に単純で、jQueryを用いてテーブルのセルにあるデータを一つずつつなぎ合わせるだけです。
※javascriptのみでも可能ですが、処理が見づらく煩雑になるのでjQueryを利用します。
以下、サンプルコードとなります。
■注意点
jQueryが利用できる前提とします。
数十M~の巨大なデータの場合、上手く動作するかは不明です。
■Javascript(jQuery)
/* * テーブル⇒CSV変換処理 * tableId : 対象のテーブルID * separator : 区切り文字列 * delimiter : ダブルクォート囲い文字の有無 true:あり | false:なし */ function tableToCSV(tableId, separator, delimiter) { var csvDataAry = []; // テーブルデータを配列に格納 var csvDataTxt = ""; // テーブルデータをテキスト形式に格納 var rowData; // 行データ var colData; // 列データ var delimStr = delimiter ? "'" : ""; // ダブルクォート囲い文字 true:あり | false:なし try { $("#" + tableId + " tr").each(function(rowIdx, row) { // テーブル行数分の処理を行う rowData = $(rows).children(); // 行データを取得 csvDataAry[rowIdx] = []; rowData.each(function(colIdx, col) { // テーブル列分の処理を行う colData = $.trim($(col).text()); // 列ごとに文字列を取得 csvDataAry[rowIdx][colIdx] = colData; // 列データを配列に格納 csvDataTxt += delimStr + colData + delimStr + separator; // 区切り文字、囲い文字を追加 }); csvDataTxt = csvDataTxt.slice(0,-1); // 余分な区切り文字を削除 csvDataTxt += "\r\n"; // 改行文字を追加 }); } catch(e) { return null; } return csvDataTxt; }
上記のサンプルは、用途に合わせテキストデータと配列に格納する2つの処理を行っております。
引数にテーブルID(文字列)、区切り文字、ダブルクォートの有無(boolean)を指定します。
処理について、テーブルデータを1行ずつ読み込み、そこからさらに列ごとに1カラムずつ文字列を取り出しています。
その間で、CSVに必要な区切り文字列、囲い文字列(ダブルクォート)の挿入、改行の挿入を行うだけのシンプルな構造です。
結合されたセルの場合もそのまま出力されますが、ヘッダーとズレてしまいます。
※どう寄せるかの判別がつかない為、今の所策はありません。。。
又、返却値としてCSV形式に整形された文字列が返却されますが、
このままだとダウンロードができない為、以下にサンプルを示します。
■Javascript(jQuery)
$(document).ready(function(){ $("#downloadCSV").click(function(){ var fileName = "テストデータ.csv"; var csvData = tableToCSV("maintable", "\t", false); if (csvData == undefined || csvData == "") { alert("CSVデータを出力できません"); return false; } else { $(this).attr("download", fileName); $(this).attr("href", "data:text/csv;charset=utf-8," + encodeURIComponent(csvData)); } }); });
■HTML
<a href="" id="downloadCSV">ダウンロード</a>
ポイントは、CSVデータが何かしらの原因で作成できなかった(Exceptionが発生した)場合に
nullを返却し、ダウンロードを中止させます。(return falseを実行する)
ここでreturn falseを行わなかった場合、空のCSVではなくソースコードがそのままダウンロードされてしまいますので注意が必要です。
以上、簡単な紹介ではございますが何かの参考に頂ければと思います。