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
関連記事
JSONデータを作ってGoogleドライブに保存する
Googleドライブの指定したフォルダにファイルをアップロードする
Googleドライブの指定したフォルダにファイルをアップロードする(formのsubmitボタンを使わない)
Google Driveに複数ファイルをアップロードしたい
JSONデータを作ってGoogleドライブに保存する
Googleドライブの指定したフォルダにファイルをアップロードする
Googleドライブの指定したフォルダにファイルをアップロードする(formのsubmitボタンを使わない)
Google Driveに複数ファイルをアップロードしたい
参考
Blob
https://developer.mozilla.org/ja/docs/Web/API/Blob
window.URL.createObjectURL
https://developer.mozilla.org/ja/docs/Web/API/URL/createObjectURL
Blob
https://developer.mozilla.org/ja/docs/Web/API/Blob
window.URL.createObjectURL
https://developer.mozilla.org/ja/docs/Web/API/URL/createObjectURL