在网页上显示Google云端硬盘中的文档

Question

是否可以在网页上显示我的驱动器中的文档？我希望用户能够直接从我的驱动器单击文档并下载它.我该怎么做呢？谢谢你的建议.

Answer 1

最快速,最简单的解决方案是使用iframe嵌入文件夹(不需要javascript).显然,这也是最不灵活的解决方案,尽管您可以使用CSS来更改iframe内容的布局(见下文).

Google云端硬盘不允许嵌入您通常使用的网址.它的X-Frame-Options标头设置为"SAMEORIGIN",阻止在iframe中使用.所以,你必须使用下面的链接,这将允许嵌入:
https://drive.google.com/embeddedfolderview?id=DOCUMENT_ID#VIEW_TYPE

DOCUMENT_ID是普通共享链接中提到的ID(类似于https://drive.google.com/folderview?id=DOCUMENT_ID),因此您只需从中复制即可.

VIEW_TYPE应该是'grid'或'list',具体取决于您的偏好.

如果您需要更改iframe内容的样式,请查看此解决方案.

Answer 2

对于 HTML/JavaScript 解决方案，请查看以下链接：

https://developers.google.com/drive/quickstart-js
https://www.youtube.com/watch?v=09geUJg11iA
https://developers.google.com/drive/web/auth/web-client

这是使用 JavaScript 的最简单方法，大部分复杂性在于您的 WebApp 授权。下面的示例读取您指定的文件夹中的文件 ID、名称和描述。
- 转到： https: //cloud.google.com/console/project 并创建一个新项目“xyz”
- 选择“API 和身份验证”，禁用不需要的，启用“Drive API”
- 选择“ Credentials”，
按“CREATE NEW CLIENT ID”按钮
x Web 应用程序
授权 Javascript 来源：“ https://googledrive.com/ ”
授权重定向 URI：“ https://googledrive.com/oauth2callback ”

它将导致：
客户端 ID ：xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com
电子邮件地址：xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx@developer.gserviceaccount.com
客户端密码：xxxxxxxxxxxxxxxxxxxx
重定向 URI： https: //googledrive.com/oauth2callback
Javascript 来源： https: //googledrive.com/

- 在下面的代码中，将
CLIENT_ID 替换为 xxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com
FOLDER_ID 为您在文件夹地址行中看到的 ID， https:
//drive.google.com/

?tab=mo&authuser=0#folders/xxxxxxxxxxxxxxxxxx - 运行它，授权

不知道你是否读过JS，代码可以从下往上看，我写的尽量简单。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
  var FOLDER_ID = '.xxxxxxxxxxxxxxxxxx';    // the folder files reside in
  var CLIENT_ID = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com';
  var SCOPE =    //'https://www.googleapis.com/auth/drive'; 
  [
    'https://www.googleapis.com/auth/drive',
    'https://www.googleapis.com/auth/drive.file',     // for description, 
  ];

  function rsvpCB(resp) {
    var picAlbumLst = '<ul>\n';
    for (i=0; i<resp.items.length; i++) 
      picAlbumLst += (
      '  <li>'+resp.items[i].id+',&nbsp;'+resp.items[i].title+',&nbsp;'+resp.items[i].description+'</li>\n');
    picAlbumLst += "</ul>\n";
    $('#container').append(picAlbumLst);
  }
  function rqstCB() {   //test @ https://developers.google.com/drive/v2/reference/files/list
    var rv = gapi.client.drive.files.list({
      'q': '"'+FOLDER_ID+'" in parents and trashed = false',
      'fields' : 'items(id,title,description)'   //'items(id,title,description,indexableText)'   
    }).execute(rsvpCB);
  }
  // authorization server reply
  function onAuthResult(authResult) {
    var authButton = document.getElementById('authorizeButton');
    authButton.style.display = 'none';
    if (authResult && !authResult.error) {  // access token successfully retrieved
      gapi.client.load('drive', 'v2', rqstCB);   
    } else {  // no access token retrieved, force the authorization flow.
      authButton.style.display = 'block';
      authButton.onclick = function() {
        checkAuth(false);
      }
    }
  }
  // check if the current user has authorized the application.
  function checkAuth(bNow) {
    gapi.auth.authorize({'client_id':CLIENT_ID, 'scope':SCOPE, 'immediate':bNow}, onAuthResult);
  }
  // called when the client library is loaded, look below
  function onLoadCB() { 
    checkAuth(true); 
  }
</script>
<script src="https://apis.google.com/js/client.js?onload=onLoadCB"></script>
<body style="background-color: transparent;">
  <input type="button" id="authorizeButton" style="display: none" value="Authorize" />
  <div id="container">
  </div>
</body>