🐕

GoogleAppsScript JavaScriptを用いてCSVをローカルに書き出す実装

2023/09/14に公開

JavaScript

GAS

Google Apps Script

tech

概要

おおよそソースを見たらわかるようにしているので説明はふわっとです。

GAS側のメソッドと機能

メソッド	機能
onOpen()	メニューバーのその他に「CSVで出力」を追加
csvDownload()	「CSVで出力」をクリックされるとCSVをダウンロード
getData()	GASからJSにシートのデータを渡す
getFileName()	出力名を取得（アクティブシート名+現在日時）

JS側のポイント

window.onloadで読み込み時にファンクションを実行
GAS側からダウンロードデータを作りダウンロードリンクを作成
擬似的にlinkオブジェクトを作成してクリックさせる
google.script.host.close();でダウアログを閉じる

実装

function.gs

// メニューバーにカスタムメニューを追加
function onOpen() {
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  var entries = [{
    name : "CSVで出力",
    functionName : "csvDownload"
  }];
  spreadsheet.addMenu("その他", entries);
};

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

// JS側で使用
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 を想定
}

// JS側で使用
// ファイル名の設定はここで！！
function getFileName() {
  var spreadSheet = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = spreadSheet.getActiveSheet();
  var now = new Date();
  var datetime = Utilities.formatDate( now, 'Asia/Tokyo', 'yyyyMMddHHmm');
  // アクティブシート名+現在日時
  return sheet.getName() + '_' + 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>

所感

ダイアログが一瞬開いてしまうのは仕方がない
VBAの80倍なじみやすい

参考

GASで文字コード指定してファイルを書き出す

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

概要

GAS側のメソッドと機能

JS側のポイント

実装

所感

参考

Discussion