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

借助“保存到云端硬盘”按钮，用户可以从您的网站将文件保存到云端硬盘。例如，假设您的网站列出了用户可以下载的几本说明手册（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>

其中：

如果您使用的是标准 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。在网页加载时，这些元素会以略有不同的方式显示，因为浏览器会在“保存到云端硬盘”JavaScript 重新呈现元素之前呈现该元素。

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

在网页上使用多个按钮

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

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

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

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

例如，如果“保存到云端硬盘”按钮放置在 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 )`	将指定的容器呈现为“保存到云端硬盘”按钮小部件。 container 要呈现为“保存到云端硬盘”按钮的容器。指定容器的 ID （字符串）或 DOM 元素本身。 parameters 一个对象，其中包含“保存到云端硬盘”标记属性作为键值对，不带 `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
)

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

container: 要呈现为“保存到云端硬盘”按钮的容器。指定容器的 ID （字符串）或 DOM 元素本身。
parameters: 一个对象，其中包含“保存到云端硬盘”标记属性作为键值对，不带 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 问题。