38
42

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-10-12

概要

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

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で文字コード指定してファイルを書き出す
https://qiita.com/jsoizo/items/948e23231417d203eefa
ローカルにファイルダウンロード
http://googleappsscript.hatenablog.com/entry/2017/09/06/120000

38
42
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
38
42

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?