JSONデータをCSVに出力する #JavaScript

html上に生成しているJSONデータをCSVに出力します。

表示している一覧表のデータのdatasourceがJSONデータであれば、CSVをダウンロードするときにわざわざサーバにRequestをしなくても、フロントサイドだけで処理が可能となり、ネットワークやサーバの負荷を軽減できると考えます。

1.ファイル構成

jqueryを使います

root
│  index.html
│  
└─js
        exportCSV.js
lib
        jquery-3.2.1.min.js

2.exportCSV.js

JSONをCSVまたはTSV形式でダウンロードするjavascriptです。delimiterに指定する文字列で拡張子が変わる仕様になっています。

exportCSV.js


//jsonをcsv文字列に編集する
function jsonToCsv(json, delimiter) {
    var header = Object.keys(json[0]).join(delimiter) + "\n";
    var body = json.map(function(d){
        return Object.keys(d).map(function(key) {
            return d[key];
        }).join(delimiter);
    }).join("\n");
    return header + body;
}

//csv変換
function exportCSV(items, delimiter, filename) {

    //文字列に変換する
    var csv = jsonToCsv(items, delimiter);

    //拡張子
    var extention = delimiter==","?"csv":"tsv";

    //出力ファイル名
    var exportedFilenmae = (filename  || 'export') + '.' + extention;

    //BLOBに変換
    var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });

    if (navigator.msSaveBlob) { // for IE 10+
        navigator.msSaveBlob(blob, exportedFilenmae);
    } else {
        //anchorを生成してclickイベントを呼び出す。
        var link = document.createElement("a");
        if (link.download !== undefined) {
            var url = URL.createObjectURL(blob);
            link.setAttribute("href", url);
            link.setAttribute("download", exportedFilenmae);
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    }
}

3.index.html

適当なjson（今回は、大阪市の住所の一部のデータとしました。）を生成して、exportCSVを呼び出します。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src="../lib/jquery-3.2.1.min.js"></script>
    <script src="js/exportCSV.js"></script>
  </head>
  <body>

  <button type="button" onclick="output();return false;">CSV</button>

  <script>
    jsondata = [
      {'addresscode':'534000000', 'prefcode': '27', 'addressname': '大阪市都島区 '},
      {'addresscode':'534002600', 'prefcode': '27', 'addressname': '大阪市都島区 網島町'},
      {'addresscode':'534001300', 'prefcode': '27', 'addressname': '大阪市都島区 内代町'},
      {'addresscode':'534002500', 'prefcode': '27', 'addressname': '大阪市都島区 片町'},
      {'addresscode':'534000100', 'prefcode': '27', 'addressname': '大阪市都島区 毛馬町'},
      {'addresscode':'534001500', 'prefcode': '27', 'addressname': '大阪市都島区 善源寺町'},
      {'addresscode':'534000200', 'prefcode': '27', 'addressname': '大阪市都島区 大東町'},
      {'addresscode':'534001100', 'prefcode': '27', 'addressname': '大阪市都島区 高倉町'},
      {'addresscode':'534001600', 'prefcode': '27', 'addressname': '大阪市都島区 友渕町'},
      {'addresscode':'534002700', 'prefcode': '27', 'addressname': '大阪市都島区 中野町'},
      {'addresscode':'534002400', 'prefcode': '27', 'addressname': '大阪市都島区 東野田町'},
      {'addresscode':'534001400', 'prefcode': '27', 'addressname': '大阪市都島区 都島北通'},
      {'addresscode':'534002200', 'prefcode': '27', 'addressname': '大阪市都島区 都島中通'},
      {'addresscode':'534002100', 'prefcode': '27', 'addressname': '大阪市都島区 都島本通'},
      {'addresscode':'534002300', 'prefcode': '27', 'addressname': '大阪市都島区 都島南通'},
      {'addresscode':'534001200', 'prefcode': '27', 'addressname': '大阪市都島区 御幸町'},
      {'addresscode':'553000000', 'prefcode': '27', 'addressname': '大阪市福島区 '},
      {'addresscode':'553000100', 'prefcode': '27', 'addressname': '大阪市福島区 海老江'},
      {'addresscode':'553000700', 'prefcode': '27', 'addressname': '大阪市福島区 大開'},
      {'addresscode':'553000200', 'prefcode': '27', 'addressname': '大阪市福島区 鷺洲'},
      {'addresscode':'553000400', 'prefcode': '27', 'addressname': '大阪市福島区 玉川'},
      {'addresscode':'553000500', 'prefcode': '27', 'addressname': '大阪市福島区 野田'},
      {'addresscode':'553000300', 'prefcode': '27', 'addressname': '大阪市福島区 福島'},
      {'addresscode':'553000600', 'prefcode': '27', 'addressname': '大阪市福島区 吉野'},
    ];
    var filename = 'サンプル';

    function output(){
        exportCSV(jsondata,',', filename);
    }
  </script>
  </body>
</html>

これでCSVボタンをクリックすると「サンプル.csv」というデータがダウンロードされるはずです。

以上です。