此页面由 Cloud Translation API 翻译。

添加“保存到云端硬盘”按钮

借助“保存到云端硬盘”按钮，用户可以将文件从您的网站保存到云端硬盘。例如，假设您的网站列出了用户可以下载的多本说明手册 (PDF)。“保存到云端硬盘”按钮可放置在每本手册旁边，以便用户将手册保存到“我的云端硬盘”。

当用户点击该按钮时，系统会从数据源下载文件，并在收到数据时将其上传到 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>

其中：

class 是必需参数，如果您使用的是标准 HTML 代码，则必须将其设置为 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。在网页加载期间，这些元素中的每一个都会显示略有不同，因为浏览器会在“保存到云端硬盘”JavaScript 重新渲染元素之前渲染该元素。

此脚本必须使用 HTTPS 协议加载，并且可以从页面的任意位置无限制地添加。您还可以异步加载脚本，以提升性能。

在网页上使用多个按钮

您可以在同一页面上放置多个“保存到云端硬盘”按钮。例如，您可以在长页面的顶部和底部放置按钮。

如果多个按钮的 data-src 和 data-filename 参数相同，则从一个按钮保存会导致所有类似按钮显示相同的进度信息。如果点击多个不同的按钮，系统会依序保存。

处理不同网域上的按钮和资源

如果“保存到云端硬盘”按钮位于与数据源不同的页面上，则保存文件的请求必须使用跨源资源共享 (CORS) 来访问资源。CORS 是一种机制，可让一个网域中的 Web 应用访问其他网域中服务器上的资源。

例如，如果在网址为 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。

如需了解详情，请参阅服务器文档，了解如何从提供“保存到云端硬盘”按钮的来源启用 CORS。如需详细了解如何为服务器启用 CORS，请参阅我想为服务器添加 CORS 支持。

JavaScript API

“保存到云端硬盘”按钮 JavaScript 在 gapi.savetodrive 命名空间下定义了两个按钮渲染函数。如果您停用自动渲染，则必须通过将 parsetags 设置为 explicit 来调用其中一个函数。

方法说明

方法	说明
`gapi.savetodrive.render( container, parameters )`	将指定的容器呈现为“保存到云端硬盘”按钮微件。容器要呈现为“保存到云端硬盘”按钮的容器。指定容器的 ID（字符串）或 DOM 元素本身。参数一个对象，其中包含“保存到云端硬盘”标记属性（键值对），不带 `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` 参数，系统会呈现网页上的所有“保存到云端硬盘”标记。

gapi.savetodrive.render(

container,
 parameters
)

将指定的容器呈现为“保存到云端硬盘”按钮微件。

容器: 要呈现为“保存到云端硬盘”按钮的容器。指定容器的 ID（字符串）或 DOM 元素本身。
参数: 一个对象，其中包含“保存到云端硬盘”标记属性（键值对），不带 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 参数，系统会呈现网页上的所有“保存到云端硬盘”标记。

使用显式加载的“保存到云端硬盘”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>

使用显式呈现的“保存到云端硬盘”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>

本地化“保存到云端硬盘”按钮

如果您的网页支持特定语言，请将 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 网址时收到 XHR 错误，请验证相应资源是否实际存在，以及您是否存在 CORS 问题。

如果系统将大文件截断为 2MB，则可能是因为您的服务器未公开 Content-Range，这可能是一个 CORS 问题。