概要

GASでJsonのダウンロードができれば良いなと思っていたが、調べていると大体、一旦Google Driveに入れろということが書いてありました。
しかし、いろいろ面倒なのでなにか他に手段が無いかと調べていたところ、GASでHTMLを表示できるということなので、DataURL使えばいいじゃんと思ったので、やってみました。
GASの設定など、TypeScriptでの環境構築などは他でいろいろ紹介されていると思うので、そちらを参照してください。
今回紹介するのは単純にダウンロード部分です。

GAS上でのプロジェクトの構成

以下のようになっているとします。

.
├── json.gas
├── main.gas
└── download.html

中身

HTMLを表示するための関数とJsonを作成する用の関数です。
webpackでトランスパイルされて、json.gas になる想定です。そのため、globalで定義します。

json.ts

declare let global: any;

global.body = "" // HTML上で参照される変数

function() { // この関数がJson文字列を作成すると仮定する。この中でspread sheetを読み込むでもよしdocumentを読み込むでもよし
    return JSON.stringify({
        firstName: "john",
        lastName: "satoh"
    }, null, 2);
}

function jsonDownloadDialog() {
    global.body = createJson();
    const name = "jsonの中身"; // ダイアログの名前

    var output = HtmlService.createTemplateFromFile('download'); //同じディレクトリにあるHTMLを参照している
    var html = output.evaluate().setHeight(420).setWidth(600);
    var ui = SpreadsheetApp.getUi();

    ui.showModalDialog(html, name);
}
global.jsonDownloadDialog = jsonDownloadDialog;

こちらは「JSON」→「ダウンロード」というメニューを用意するためのスクリプトです。
こちらはwebpackに含まれない想定です。（globalに定義しても呼ばれなかったので別にしました。

main.js

function onOpen() {
    var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
    var entries = [{
        name : "ダウンロード",
        functionName : "jsonDownloadDialog" // globalに定義されているjson.gasの関数を参照している
    }];
    spreadsheet.addMenu("JSON", entries);
}

こちら作成したJsonを表示し、さらに自動的にファイルをダウンロードするスクリプトが入っているHTMLです。
#jsonの中身をFileとしてObjectURLにしている感じです。

download.html

<!DOCTYPE html>
<html lang="jp">
<head>
    <base target="_top">
    <script>
        window.addEventListener('load', function() {
            console.log(document.querySelector("#json").textContent)
            var link = document.createElement('a');
            link.download = 'data.json'; // ファイル名
            var blob = new Blob([document.querySelector("#json").textContent], {type: 'text/plain'});
            link.href = window.URL.createObjectURL(blob);
            link.text = "もう一回ダウンロード";
            document.querySelector("#download_area").appendChild(link);
            link.click(); // aタグを叩く
        });
    </script>
</head>
<body>
    <pre id="json"><?
output.append(body);
        ?></pre>
    <div id="download_area">
    </div>
</body>
</html>

出来上がり

まとめ

GAS面白い。
claspでhtmlがあげられるのを知りませんでしたし、メニューを追加できるのも知りませんでした。。。
これなら本当に小さいアプリケーションは作れてしまいますね。。。