GoogleAppsScript屋さん

GoogleAppsScript のサンプルコードなどを載せていきます

ローカルにファイルダウンロード

今回はGoogleスプレッドシートの値をCSV形式にしてローカルにファイルダウンロードするサンプルコードを紹介します。

ローカルファイルを読み込む で紹介した方法と同様に、Googleスプレッドシートはサーバー上に存在するため、ダイアログを介してファイルをダウンロードします。

データ作成は GoogleAppsScript で行い、ファイルダウンロードは JavaScript で行います。

サンプルコード

以下2ファイルが登場します。

  • コード.gs(GoogleAppsScript)
  • dialog.html (HTML, JavaScript

コード.gs

function main() {
  
  // dialog.html をもとにHTMLファイルを生成
  // evaluate() は dialog.html 内の GAS を実行するため( <?= => の箇所)
  var html = HtmlService.createTemplateFromFile("dialog").evaluate();
  
  // 上記HTMLファイルをダイアログ出力
  SpreadsheetApp.getUi().showModalDialog(html, "ファイルダウンロード");
}

function getData() {
  
  // スプレッドシート上の値を二次元配列の形で取得
  var sheet = SpreadsheetApp.getActiveSheet();
  var values = sheet.getDataRange().getValues();

  // 二次元配列をCSV形式のテキストデータに変換
  var dataArray = [];
  for (var i = 0; i < values.length; i++) {
    dataArray.push(values[i].join(","));
  }
  return dataArray.join("\r\n");  // 改行コードは windows を想定
  
}

dialog.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script type='text/javascript'>    
      function handleDownload() {
        var content = <?= getData(); ?>;  // 出力データを GAS から取得する
        var blob = new Blob([ content ], { "type" : "text/csv"});
        document.getElementById("download").href = window.URL.createObjectURL(blob);
      }
  </script>
  </head>
  <body>
    <a id="download" href="#" download="test.txt" onclick="handleDownload()">ダウンロード</a>
  </body>
</html>

実行の流れ

当サンプルコードを実行した時の流れです。

  1. スプレッドシートに値が設定されている f:id:rokuni62:20170905171924p:plain

  2. スクリプトエディタよりmain()を実行すると、スプレッドシート上にファイルダウンロード用のダイアログが表示される f:id:rokuni62:20170905171931p:plain

  3. 「ダウンロード」をクリックするとファイルがダウンロードされる f:id:rokuni62:20170905171936p:plain

  4. ファイルを開くとスプレッドシートの値がCSV形式で保存されている f:id:rokuni62:20170905171945p:plain

解説

前述したように Googleスプレッドシートはサーバー上に存在しているため、ローカルにファイルを直接ダウンロードすることができません。処理するためには仲介役が必要になります。ここではダイアログが仲介役となります。

プログラムの流れ

  1. GAS側のfunction main() を実行し dialog.html を元にしたダイアログを表示します。このとき dialog.html にはGASのコードが埋め込まれており、それを実行した結果を取得するためにcreateTemplateFromFile().evaluate() としています
  2. 表示されたダイアログの「ダウンロード」をクリックすると HTML側の handleDownload() が実行され、ファイルがダウンロードされます
  3. この時、ダウンロードするファイルの内容は <?= getData(); ?> により取得され、GAS側の function getData() が呼び出されます
  4. function getData() ではスプレッドシート上の値をCSV形式に変換しテキストデータを返却します(改行コードはWindowsを想定し\r\nとしています)
  5. ダウンロードされたファイルの内容を確認するとスプレッドシートの値がCSV形式でダウンロードできていることが分かります

参考記事

qiita.com HTML Service: Templated HTML  |  Apps Script  |  Google Developers