##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」というデータがダウンロードされるはずです。
以上です。