LANG SELRCT

コードを書く場所についてはこちら

2017年11月5日日曜日

Webアプリのiframeの中にGoogle Driveのファイルを表示する



HTML Serviceで作ったWebアプリケーションの中に
Google Driveのファイルを読み込みたくて試した方法です

読み込んで表示することを目的とした方法です
右上の矢印アイコンをクリックするとファイルが開きます

編集もできるように読み込みたい場合はこちら
Webアプリのiframeの中にGoogle Driveのファイルを表示する(編集可能)


Webアプリを作る方法はこちらにまとめました





コード.gs
function 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