【GAS】スプレッドシートからCSVをダウンロードする1クリックボタン/メニューを作成しよう

この記事は GAS道場 Advent Calendar 2019 の18日目の記事です。 Google Apps Script(GAS)をこれから使おうという方向けのアドベントカレンダーになります。

今回は、GASのダイアログを用いて、CSVをダウンロードする機能の作成をしたいと思います。

はじめに

使用するスプレッドシートは、このアドベントカレンダーでもおなじみに以下のようなデータにします。 f:id:ponkotsu0605:20191217232200p:plain このシートにCSVに出力してダウンロードする仕組みをつけたいと思います。

スクリプト

早速ですが、ソースコードの紹介になります。

function onOpen() {
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  var entries = [{
    name:"ダウンロード",
    functionName:"downloadCsv"
  }];
  spreadsheet.addMenu("CSV", entries);
};

function downloadCsv() {
  var html = HtmlService.createTemplateFromFile("dialog").evaluate();
  SpreadsheetApp.getUi().showModalDialog(html, "Download!!");
}

function getData() {
  var values = SpreadsheetApp.getActiveSheet().getDataRange().getValues();
  var data = [];
  for (var i = 0; i < values.length; i++) {
    data.push(values[i].join(","));
  }
  return data.join("\r\n");
}

function getFileName() {
  var sheetName = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getName()
  var datetime = Utilities.formatDate(new Date(),'Asia/Tokyo', 'yyyyMMddHHmm');

  return sheetName + '_' + datetime + '.csv';
}

そして、ダイアログ用にdialog.htmlも作成しましょう。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script type='text/javascript'>    
      window.onload = function(){
        handleDownload();
      }
      function handleDownload() {
        // 出力データを GAS から取得する
        var content = <?= getData(); ?>;
        var blob = new Blob([ content ], { "type" : "text/csv"});
        var link = document.createElement('a');
        // ファイル名を GAS から取得する
        link.download = <?= getFileName(); ?>;
        link.href = window.URL.createObjectURL(blob);
        link.click();
        // ダイアログを閉じる
        google.script.host.close();
      }
  </script>
  </head>
</html>