（メモ）ダウンロードボタンの作り方

<!--ダウンロードボタンのスタイルを規定している-->
<style>
	.btn--orange,
	a.btn--orange {
		color: #fff;
		background-color: #1e88e5;
	}

	.btn--orange:hover,
	a.btn--orange:hover {
		color: #fff;
		background: #1e88e5;
	}

	a.btn--radius {
		border-radius: 100vh;
	}
</style>

<!--ダウンロードボタンのHTMLタグ-->
<a class="btn btn--orange btn--radius">
	<button　 type="button" onclick="download_api('API_URL')">
		Download CSV
	</button>
</a>

<!--APIからJSONをダウンロードし、CSVに書き出している。-->
<script>
	async function download_api(url) {
		const request = await fetch(url);
		const response = await request.json();

		//json=>csv
		var header = Object.keys(response[0]).join(",") + "\n";
		var body = response
			.map(function (d) {
				return Object.keys(d)
					.map(function (key) {
						return d[key];
					})
					.join(",");
			})
			.join("\n");

		csv = header + body;

		//csv download
		//ダウンロードするCSVファイル名を指定する
		const filename = "sql_yoron.csv";
		//CSVデータ
		const data = csv;
		//BOMを付与する(Excelでの文字化け対策)
		const bom = new Uint8Array([0xef, 0xbb, 0xbf]);
		//Blobでデータを作成する
		const blob = new Blob([bom, data], { type: "text/csv" });

		//BlobからオブジェクトURLを作成する
		const download_url = (window.URL || window.webkitURL).createObjectURL(blob);
		//ダウンロード用にリンクを作成する
		const download = document.createElement("a");
		//リンク先に上記で生成したURLを指定する
		download.href = download_url;
		//download属性にファイル名を指定する
		download.download = filename;
		//作成したリンクをクリックしてダウンロードを実行する
		download.click();
		//createObjectURLで作成したオブジェクトURLを開放する
		(window.URL || window.webkitURL).revokeObjectURL(download_url);

		return response;
	}

</script>