HTML Serviceで作ったWebアプリケーションの中に
Google Driveのファイルを読み込みたくて試した方法です
読み込んで表示することを目的とした方法です
右上の矢印アイコンをクリックするとファイルが開きます
編集もできるように読み込みたい場合はこちら
Webアプリのiframeの中にGoogle Driveのファイルを表示する(編集可能)
Webアプリを作る方法はこちらにまとめました
コード.gsfunction doGet() { return HtmlService.createHtmlOutputFromFile('index'); } | 意訳この処理は以下を実行する indexという名のHTMLファイルを返す |
index.html<!DOCTYPE html> <html> <head> <style> .iframe_doc { width: 800px; height: 1300px; } </style> </head> <body> <iframe src="https://docs.google.com/viewer?srcid=FILE_ID&pid=explorer&efh=false&a=v&chrome=false&embedded=true" class="iframe_doc"> </iframe> </body> </html> | 意訳HTMLファイルであることを宣言する htmlタグを作成 headタグを作成 styleタグを作成 iframe_docの withを設定 heightを設定 styleタグを閉じる headタグを閉じる bodyタグを作成 iframeタグを作成し読み込むファイルを指定する iframeタグを閉じる bodyタグを閉じる htmlタグを閉じる |
補足
表示するだけならpreviewでやった方が短く書ける
<iframe src="https://drive.google.com/file/d/FILE_ID/preview"></iframe>
参考サイト
https://developers.google.com/apps-script/guides/html/
Docs editors Help
https://support.google.com/docs/forum/AAAABuH1jm0pk1KvDTNgd4?hl=en
URL de imagen en drive
https://support.google.com/docs/forum/AAAA9m589mg_19FzM19l0M?hl=en