2018年2月10日土曜日

Googleドライブのテキストファイルをローカルにダウンロードする


Googleドライブ上にあるファイルのURLを入力してDownloadボタンをクリックすると
ローカルPCにファイルがダウンロードされる

という機能をHTML Serviceで作った時のコードです


（UIの画像）


コード.gs 
function doGet(){
 return HtmlService.createHtmlOutputFromFile("index");
}

function download_gs(file_url) {
  var file_id = file_url.split("/d/")[1].split("/")[0];
  var file = DriveApp.getFileById(file_id);
  var blob = file.getBlob()
  var data = blob.getDataAsString();
  var name = file.getName();
  var array = [data, name]
  return array;
}
意訳
この機能がやること
指定したHTMLを表示する


この機能がやること
渡されたfile_urlからfile idを取得して
Googleドライブ内でそのファイルを取得して
blobを取得して
文字列として取得して
ファイル名も取得して
配列に入れて
返す


index.html 
<!DOCTYPE html>
<html>
  <body>
    <input type="text" id="url" placeholder="drive file url">
    <button id="button">Download</button>
    <script>
  var file_url = document.getElementById("url");
  var download_button = document.getElementById("button");
  download_button.onclick = download;

  function download() {
    google.script.run
      .withFailureHandler(onFailure)
      .withSuccessHandler(onSuccess)
      .download_gs(file_url.value);
  }

  function onSuccess(array) {
    var data = array[0];
    var file_name = array[1];
    var blob = new Blob([data], {"type":"text/plain"});
    var link = document.createElement("a");
    link.download = file_name;
    link.href = window.URL.createObjectURL(blob);
    link.click();
  }

  function onFailure(e) {
    alert([e.message, e.stack]);
  }
    </script>
  </body>
</html>
意訳
 


テキストボックス
ボタン

idがurlの要素を取得する
idがbuttonの要素を取得する
download_buttonがクリックされたらdownloadを実行する

この処理がやること
.gsのスクリプトを実行する
失敗したらonFailureを実行する
成功したらonSuccessを実行する
実行する.gsのスクリプトはdownload_gsでfile_url.valueを渡す


この機能がやること
受け取ったarrayの0番目（data）を取得して
arrayの1番目（file_name）も取得して
blobを作成して
aタグを作成して
ダウンロードするファイル名を設定して
hrefを設定して
クリックする


この処理は以下を実行する
エラーメッセージと過程をアラートに出す


var blob = new Blob([data], {"type":"text/plain"});
の type で保存したいファイルタイプを指定します

プレーンテキストの場合：text/plain
CSVの場合：text/csv
JSONの場合：application/json