借助“保存到云端硬盘”按钮，用户可将文件从您的网站保存到云端硬盘。例如，假设您的网站列出了多本用户可以下载的说明手册 (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( |
将指定容器呈现为“保存到云端硬盘”按钮 widget。
|
gapi.savetodrive.go( |
在指定容器中呈现所有“保存到云端硬盘”标记和类。
只有在 parsetags 设置为 explicit 时，才应使用此函数，您可能会出于性能方面的考虑而这样做。
|
明确加载的“保存到云端硬盘”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 问题。