目的
HTML上でJavaScriptを使ってAPIコールし、レスポンスをCSVダウンロード（っぽく）取得する。
方法
- APIからのレスポンス値をCSV形式へ変換する。
- 変換したCSVでdataURLを使ってリンク（aタグ）を生成する。
実装
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script>
//実際にはAPIコールを行う
// ※配列の配列（CSVの1行に該当）で返す
const getApiResFromAPI = async () => {
return [
['row 1 / cell 1', 'row 1 / cell 2', 'row 1 / cell 3'],
['row 2 / cell 1', 'row 2 / cell 2'],
['row 3 / cell 1', 'row 3 / cell 2', 'row 3 / cell 3', 'row 3 / cell 4']
];
}
// CSVダウンロードボタンを押下した際のclickイベント
const csvdownload = async () => {
// APIからCSVの中身を取得
var apiResData = await getApiResFromAPI();
// 取得した結果をCSV形式でつなげていく
var csv = [];
apiResData.forEach((row, index) => {
csv.push(row.join(','));
});
// APIからダウンロードしたCSVファイルのデータURIを持ったaタグを生成
var element = document.createElement('a');
element.text = "テスト"
element.href = 'data:text/csv;charset=utf-8,%EF%BB%BF' + encodeURIComponent(csv.join('\n'));
element.setAttribute('download', 'basic.csv');
// aタグを裏で追加して、クリック（csvファイルダウンロード用のダイアログが表示される）、裏で削除する
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
</script>
<body>
<input type="button" onClick="csvdownload(); return false;" value="CSVダウンロード">
</body>
</html>