HTML上でJavaScriptを使ってAPIコールし、レスポンスをCSVダウンロード（っぽく）取得する #JavaScript

目的

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>