HTMLのテーブルからCSVを作成する | 株式会社アースリンク
株式会社アースリンク > 開発者ブログ > テクノロジー > HTMLのテーブルからCSVを作成する
お知らせ
資料請求
Apply for this brochure資料請求

2017年9月12日

HTMLのテーブルからCSVを作成する

Icons made by Good Ware from www.flaticon.com is licensed by CC 3.0 BY

 

 

Web画面からCSVを出力する手段の一つをご紹介します。

 

Webシステムで集計画面にCSVボタンを配置する場合があるかと思います。

その場合、よくある方法としましてはCSVボタン押下時に再度DBへ問い合わせ結果をCSV整形して取得し、
テキストへ出力するかと思います。

 

今回ご紹介するのは、今表示している集計情報（HTMLのテーブル）をそのままCSVへコンバートする方法です。
※リアルタイムではなくなりますが、DBアクセスを減らせるというメリットがあるかと思います。

 

考え方としましては非常に単純で、jQueryを用いてテーブルのセルにあるデータを一つずつつなぎ合わせるだけです。
※javascriptのみでも可能ですが、処理が見づらく煩雑になるのでjQueryを利用します。

 

以下、サンプルコードとなります。

 

■注意点

　jQueryが利用できる前提とします。

　数十M～の巨大なデータの場合、上手く動作するかは不明です。

 

 

■Javascript(jQuery)

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/*
 * テーブル⇒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)

?
1
2
3
4
5
6
7
8
9
10
11
12
13
$(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

?
1
<a href="" id="downloadCSV">ダウンロード</a>

 

ポイントは、CSVデータが何かしらの原因で作成できなかった(Exceptionが発生した)場合に
nullを返却し、ダウンロードを中止させます。(return falseを実行する)
ここでreturn falseを行わなかった場合、空のCSVではなくソースコードがそのままダウンロードされてしまいますので注意が必要です。

 

 

以上、簡単な紹介ではございますが何かの参考に頂ければと思います。

List >

Contact
お問い合わせ

電話番号0120 - 889 - 236

受付時間：平日 9:00-18:00