在 html 页面中获取并显示 Google Doc 正文答案

【问题标题】：Fetch and display Google Doc body within html page在 html 页面中获取并显示 Google Doc 正文
【发布时间】：2013-09-03 10:31:06
【问题描述】：

是否可以检索 Google Doc 的内容并将其显示在 html 页面的 div 中？如果是这样，在下面的精简示例中实现“MAGIC”的正确方法是什么？

<html>
    <head>
    </head>
    <body>
       <div>
          <MAGIC>
            Script or link that retrieves and displays the body of a Google Doc.
          </MAGIC>
       </div>
    </body>
</html>

在上面，你可以假设

html 由 Google Drive Hosting 提供。
对 Google 文档的引用是静态的。
无需在公共 html 页面中编辑 Doc（即在该上下文中它是只读的）。

我已通读 Apps 脚本文档，看起来似乎可以通过文档服务和内容服务的某种组合来实现。例如，文档服务有 getBody() 和 copy() 方法，但不清楚这些调用返回的对象是否可以将所见即所得呈现为 html 以插入到 html 容器中。

背景：我正在尝试为一家小型非营利组织实施安全且易于使用的 CMS。我已经制作了一个托管网站框架的原型在 Google 云端硬盘上。到目前为止，它看起来很有希望，但更改需要能够编辑 html。我们有很多人可以在类似文字处理器的环境中创建内容，但只有几个人，包括我自己谁能应付 HTML/CSS/JQuery/AppsScript。

如果我可以专注于整体框架并让其他人更新内容事件等，那将是一个巨大的胜利。基本上，如果他们能够编辑 Google Doc，然后手动重新加载网页以查看结果，我会非常高兴。

我意识到 CMS 有很多方法，但目前我有兴趣探索纯粹的 Google Docs/Google Drive 解决方案。

【问题讨论】：

标签： content-management-system google-apps-script google-docs-api

【解决方案1】：

您可以通过使用 urlFetch 调用驱动 API 来获取 google 文档的原始 html 内容，这是它的工作原理

      var id = 'Doc-Very-Long-ID-Here';
      var url = 'https://docs.google.com/feeds/';
      var doc = UrlFetchApp.fetch(url+'download/documents/Export?exportFormat=html&format=html&id='+id,
                                  googleOAuth_('docs',url)).getContentText();

   // the variable doc is the HTML content that you can use

    function googleOAuth_(name,scope) {
      var oAuthConfig = UrlFetchApp.addOAuthService(name);
      oAuthConfig.setRequestTokenUrl("https://www.google.com/accounts/OAuthGetRequestToken?scope="+scope);
      oAuthConfig.setAuthorizationUrl("https://www.google.com/accounts/OAuthAuthorizeToken");
      oAuthConfig.setAccessTokenUrl("https://www.google.com/accounts/OAuthGetAccessToken");
      oAuthConfig.setConsumerKey('anonymous');
      oAuthConfig.setConsumerSecret('anonymous');
      return {oAuthServiceName:name, oAuthUseToken:"always"};
    }

还有一个由 Romain Vialard available here 编写的库，它被称为 DocsListExtended，并提供了一大堆不错的扩展。

编辑： 按照您的编辑：

你不能像那样使用它，在 web 应用程序中渲染 HTML 内容使用html service，下面的示例带有你的完整代码和working example：

function doGet() {

    var id = '1el3DpTp1sukDjzlKXh8plf0Zj-qm0drI7KbytroVrNU';
    var url = 'https://docs.google.com/feeds/';
    var doc = UrlFetchApp.fetch(url+'download/documents/Export?exportFormat=html&format=html&id='+id, googleOAuth_('docs',url)).getContentText();
    return HtmlService.createHtmlOutput(doc);
}

// the variable doc is the HTML content that you can use

function googleOAuth_(name,scope) {
    var oAuthConfig = UrlFetchApp.addOAuthService(name);
    oAuthConfig.setRequestTokenUrl("https://www.google.com/accounts/OAuthGetRequestToken?scope="+scope);
    oAuthConfig.setAuthorizationUrl("https://www.google.com/accounts/OAuthAuthorizeToken");
    oAuthConfig.setAccessTokenUrl("https://www.google.com/accounts/OAuthGetAccessToken");
    oAuthConfig.setConsumerKey('anonymous');
    oAuthConfig.setConsumerSecret('anonymous');
    return {oAuthServiceName:name, oAuthUseToken:"always"};
}

【讨论】：

谢谢，谢尔盖。它看起来很明智，但我无法让它发挥作用。请参阅上面我用您的解决方案编辑我的帖子的地方，因为我已经在 App Script 中实现了它。我收到了 404。已包含文档 ID，以便您验证它。它只是一个包含“这是对 CMS 系统的测试”这句话的文档。
固定 id 字符串以仅包含 id。不再出现 404，但现在得到“脚本已完成，但返回的值不是受支持的返回类型。”
谢谢。我已经验证它在 webapp 上下文中工作。不幸的是，我遇到了“同源”问题，因为我的网页由 googledrive.com 托管，但内容页面位于 docs.google.com 中。否则，您的回答是一个很好的答案，我很感激您花时间对我进行 HtmlService、oAuth 和 UrlFetchApp 方面的教育。

【解决方案2】：

我已决定发布内容文档并包含 Google 提供的 iframe 嵌入代码，以实现我最初问题中的“MAGIC”，例如

<iframe class="cmsframe" src="https://docs.google.com/document/d/1rhkuAB3IIu5Hq0tEtA4E_Qy_-sJMMnb33WBMlAEqlJU/pub?embedded=true"></iframe>

class 标签是手动添加的，所以我可以用 CSS 控制 iframe 的大小。

【讨论】：