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
