新增「儲存至雲端硬碟」按鈕(&A)

「儲存至雲端硬碟」按鈕可讓使用者從您的網站將檔案儲存至雲端硬碟。舉例來說，假設您的網站列出多份使用者可下載的操作手冊 (PDF)，您可以將「儲存至雲端硬碟」按鈕放在每份手冊旁邊，讓使用者將手冊儲存到「我的雲端硬碟」。

使用者按下按鈕後，系統會從資料來源下載檔案，並在收到資料時上傳至 Google 雲端硬碟。由於下載作業是在使用者瀏覽器的情況下進行，因此這個程序可讓使用者透過已建立的瀏覽器工作階段，驗證儲存檔案的動作。

支援的瀏覽器

「儲存至雲端硬碟」按鈕支援這些瀏覽器。

在頁面中加入「儲存至雲端硬碟」按鈕

如要建立「儲存至 Google 雲端硬碟」按鈕的例項，請在網頁中加入下列指令碼：

<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-savetodrive"
   data-src="//example.com/path/to/myfile.pdf"
   data-filename="My Statement.pdf"
   data-sitename="My Company Name">
</div>

在此情況下：

  • 如果您使用標準 HTML 標記，class 是必須設為 g-savetodrive 的必要參數。

  • data-src 是必要參數，其中包含要儲存的檔案網址。

    • 網址可以是絕對或相對網址。
    • data-src 網址可以透過與按鈕代管網域相同的網域、子網域和通訊協定提供。您必須在網頁和資料來源之間使用相符的通訊協定。
    • 不支援資料 URI 和 file:// 網址。
    • 由於瀏覽器採用同源政策，這個網址必須從放置網頁的網域提供，或是使用跨來源資源共享 (CORS) 才能存取。如果按鈕和資源位於不同網域，請參閱「處理不同網域中的按鈕和資源」(#domain)。
    • 如要在 http 和 https 都提供相同網頁時提供檔案，請指定不含通訊協定的資源，例如 data-src="//example.com/files/file.pdf"，系統會根據存取代管網頁的方式使用適當的通訊協定。

  • data-filename 是必要參數，其中包含用於儲存檔案的名稱。

  • data-sitename 是必要參數，其中包含提供檔案的網站名稱。

您可以將這些屬性放在任何 HTML 元素上。不過，最常用的元素是 div、span 或 button。在網頁載入期間，每個元素的顯示方式略有不同，因為瀏覽器會在「Save to Drive」JavaScript 重新算繪元素之前算繪元素。

這個指令碼必須使用 HTTPS 通訊協定載入，且可從網頁上的任何位置加入，不受任何限制。您也可以以非同步方式載入指令碼，提升效能。

在網頁上使用多個按鈕

您可以在同一個頁面上放置多個「儲存至雲端硬碟」按鈕。舉例來說，您可能會在長頁面的頂端和底部放置按鈕。

如果多個按鈕的 data-src 和 data-filename 參數相同，從一個按鈕儲存後，所有類似的按鈕都會顯示相同的進度資訊。如果點按多個不同的按鈕，系統會依序儲存這些按鈕。

處理不同網域中的按鈕和資源

如果「儲存至 Google 雲端硬碟」按鈕位於與資料來源不同的頁面，則儲存檔案的要求必須使用跨來源資源共用 (CORS) 存取資源。CORS 是一種機制，可讓某個網域中的網路應用程式存取不同網域中伺服器的資源。

舉例來說，如果「Save to Drive」按鈕位於 http://example.com/page.html 的頁面上，且資料來源指定為 data-src="https://otherserver.com/files/file.pdf"，除非瀏覽器可以使用 CORS 存取資源，否則按鈕將無法存取 PDF。

data-src 網址可從其他網域提供，但 HTTP 伺服器的回應必須支援 HTTP OPTION 要求，並包含下列特殊 HTTP 標頭：

Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Range
Access-Control-Expose-Headers: Cache-Control, Content-Encoding, Content-Range

Access-Control-Allow-Origin 可以設為 *，允許任何網域的 CORS，或者也可以指定可透過 CORS 存取資源的網域，例如 http://example.com/page.html。如果您沒有伺服器可用於託管內容，請考慮使用 Google App Engine。

如需更多資訊，請參閱伺服器說明文件，瞭解如何從提供「儲存至 Google 雲端硬碟」按鈕的來源啟用 CORS。如要進一步瞭解如何為 CORS 啟用伺服器，請參閱「我想為伺服器新增 CORS 支援」。

JavaScript API

「Save to Drive」按鈕的 JavaScript 會在 gapi.savetodrive 命名空間下定義兩個按鈕轉譯函式。如果您停用自動轉譯功能，就必須將 parsetags 設為 explicit，呼叫其中一個函式。

方法 說明
gapi.savetodrive.render(
container,
parameters
)		 將指定的容器算繪為「儲存至雲端硬碟」按鈕小工具。
容器
要轉譯為「儲存至雲端硬碟」按鈕的容器。指定容器的 ID (字串) 或 DOM 元素本身。
parameters
含有「Save to Drive」標記屬性做為鍵=值組合的物件，不含 data- 前置字元。例如：{"src": "//example.com/path/to/myfile.pdf", "filename": "My Statement.pdf", "sitename": "My Company Name"}。
gapi.savetodrive.go(
opt_container
)		 在指定容器中算繪所有「儲存至雲端硬碟」標記和類別。只有在 parsetags 設為 explicit 時，才應使用這個函式。您可能會基於效能考量而這麼做。
opt_container
容器，其中包含要轉譯的「儲存至雲端硬碟」按鈕代碼。請指定容器的 ID (字串) 或 DOM 元素本身。如果省略 opt_container 參數，系統會轉譯網頁上的所有「Save to Drive」標記。

使用明確載入的「Save to Drive」JavaScript 程式碼範例

<!DOCTYPE html>
    <html>
      <head>
        <title>Save to Drive Demo: Explicit Load</title>
        <link rel="canonical" href="http://www.example.com">
        <script src="https://apis.google.com/js/platform.js" async defer>
          {parsetags: 'explicit'}
        </script>
      </head>
      <body>
        <div id="container">
          <div class="g-savetodrive"
             data-src="//example.com/path/to/myfile.pdf"
             data-filename="My Statement.pdf"
             data-sitename="My Company Name">
          <div>
        </div>
        <script type="text/javascript">
          gapi.savetodrive.go('container');
        </script>
      </body>
    </html>

使用明確轉譯的「Save to Drive」JavaScript 範例

    <!DOCTYPE html>
    <html>
      <head>
        <title>Save to Drive Demo: Explicit Render</title>
        <link rel="canonical" href="http://www.example.com">
        <script>
          window.___gcfg = {
            parsetags: 'explicit'
          };
        </script>
        <script src="https://apis.google.com/js/platform.js" async defer></script>
      </head>
      <body>
        <a href="javascript:void(0)" id="render-link">Render the Save to Drive button</a>
        <div id="savetodrive-div"></div>
        <script>
          function renderSaveToDrive() {
            gapi.savetodrive.render('savetodrive-div', {
              src: '//example.com/path/to/myfile.pdf',
              filename: 'My Statement.pdf',
              sitename: 'My Company Name'
            });
          }
          document.getElementById('render-link').addEventListener('click', renderSaveToDrive);
        </script>
      </body>
    </html>

將「Save to Drive」按鈕本地化

如果網頁支援特定語言，請將 window.___gcfg.lang 變數設為該語言。如未設定，系統會使用使用者的 Google 雲端硬碟語言。

如需可用的語言代碼值，請參閱支援的語言代碼清單。

    <!DOCTYPE html>
    <html>
      <head>
        <title>Save to Drive Demo: Async Load with Language</title>
        <link rel="canonical" href="http://www.example.com">
      </head>
      <body>
        <div class="g-savetodrive"
             data-src="//example.com/path/to/myfile.pdf"
             data-filename="My Statement.pdf"
             data-sitename="My Company Name">
        </div>

        <script type="text/javascript">
          window.___gcfg = {
            lang: 'en-US'
          };
        </script>
        <script src = 'https://apis.google.com/js/platform.js' async defer></script>

      </body>
    </html>

疑難排解

如果在下載 data-src URL 時收到 XHR 錯誤，請確認資源確實存在，且沒有 CORS 問題。

如果大型檔案會截斷至 2 MB，則可能是伺服器未公開 Content-Range，可能是 CORS 問題。