'Drive에 저장' 버튼을 사용하면 사용자가 웹사이트에서 Drive에 파일을 저장할 수 있습니다. 예를 들어 웹사이트에 사용자가 다운로드할 수 있는 설명서 (PDF)가 여러 개 나열되어 있다고 가정해 보겠습니다. 'Drive에 저장' 버튼을 각 설명서 옆에 배치하여 사용자는 내 드라이브에 매뉴얼을 저장할 수 있습니다.
사용자가 버튼을 클릭하면 파일이 데이터 소스에서 다운로드되고 데이터가 수신될 때 Google Drive에 업로드됩니다. 다운로드가 사용자의 브라우저 컨텍스트에서 이루어지므로 이 프로세스를 통해 사용자는 설정된 브라우저 세션을 사용하여 파일을 저장하는 작업을 인증할 수 있습니다.
지원되는 브라우저
'Drive에 저장' 버튼은 이 브라우저를 지원합니다.
페이지에 'Drive에 저장' 버튼 추가
'Drive에 저장' 버튼의 인스턴스를 만들려면 웹페이지에 다음 스크립트를 추가합니다.
<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는 저장할 파일의 URL이 포함된 필수 매개변수입니다.- 절대 URL 또는 상대 URL을 사용할 수 있습니다.
data-srcURL은 버튼이 호스팅되는 도메인과 동일한 도메인, 하위 도메인, 프로토콜에서 제공될 수 있습니다. 페이지와 데이터 소스 간에 일치하는 프로토콜을 사용해야 합니다.- 데이터 URI 및
file://URL은 지원되지 않습니다. - 브라우저의 동일한 출처 정책으로 인해 이 URL은 URL이 배치된 페이지와 동일한 도메인에서 제공하거나 교차 출처 리소스 공유 (CORS)를 사용하여 액세스할 수 있어야 합니다. 버튼과 리소스가 서로 다른 도메인에 있으면 다른 도메인의 버튼 및 리소스 처리(#domain)를 참조하세요.
- http와 https 모두로 동일한 페이지를 제공할 때 파일을 제공하려면
data-src="//example.com/files/file.pdf"와 같은 프로토콜 없이 리소스를 지정합니다. 이 프로토콜은 호스팅 페이지에 액세스한 방식에 따라 적절한 프로토콜을 사용합니다.
data-filename은 저장 파일에 사용된 이름이 포함된 필수 매개변수입니다.data-sitename는 파일을 제공하는 웹사이트의 이름을 포함하는 필수 매개변수입니다.
이 속성은 모든 HTML 요소에 배치할 수 있습니다. 하지만 가장 일반적으로 사용되는 요소는 div, span 또는 button입니다. 브라우저가 'Drive에 저장' JavaScript가 요소를 다시 렌더링하기 전에 요소를 렌더링하기 때문에 이러한 각 요소는 페이지가 로드되는 동안 약간 다르게 표시됩니다.
이 스크립트는 HTTPS 프로토콜을 사용하여 로드해야 하며 페이지의 어느 지점에서든 제한 없이 포함할 수 있습니다. 스크립트를 비동기식으로 로드하여 성능을 개선할 수도 있습니다.
한 페이지에서 여러 버튼 사용
같은 페이지에 '드라이브에 저장' 버튼을 여러 개 배치할 수 있습니다. 예를 들어 긴 페이지의 상단과 하단에 버튼이 있을 수 있습니다.
여러 버튼에서 data-src 및 data-filename 매개변수가 동일한 경우 하나의 버튼에서 저장하면 유사한 모든 버튼에 동일한 진행률 정보가 표시됩니다. 서로 다른 여러 버튼을 클릭하면 순차적으로 저장됩니다.
다양한 도메인의 버튼 및 리소스 처리
'드라이브에 저장' 버튼이 데이터 소스와 별도의 페이지에 있는 경우 파일 저장 요청에서 교차 출처 리소스 공유 (CORS)를 사용하여 리소스에 액세스해야 합니다. CORS는 한 도메인에 있는 웹 애플리케이션이 다른 도메인에 있는 서버의 리소스에 액세스할 수 있도록 하는 메커니즘입니다.
예를 들어 'Drive에 저장' 버튼이 http://example.com/page.html의 페이지에 있고 데이터 소스가 data-src="https://otherserver.com/files/file.pdf"로 지정된 경우, 브라우저가 CORS를 사용하여 리소스에 액세스할 수 없으면 버튼이 PDF에 액세스할 수 없습니다.
data-src URL을 다른 도메인에서 제공할 수 있지만 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
'Drive에 저장' 버튼 JavaScript는 gapi.savetodrive 네임스페이스 아래에 버튼 렌더링 함수 두 개를 정의합니다. 자동 렌더링을 사용 중지하는 경우 parsetags를 explicit로 설정하여 이러한 함수 중 하나를 호출해야 합니다.
| 메서드 | 설명 |
|---|---|
gapi.savetodrive.render( |
지정된 컨테이너를 'Drive에 저장' 버튼 위젯으로 렌더링합니다.
|
gapi.savetodrive.go( |
지정된 컨테이너의 모든 'Drive에 저장' 태그와 클래스를 렌더링합니다.
이 함수는 parsetags가 explicit로 설정된 경우에만 사용해야 하며, 성능상의 이유로 사용할 수 있습니다.
|
명시적 로드가 포함된 '드라이브에 저장' 자바스크립트의 예
<!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>
명시적 렌더링이 포함된 'Drive에 저장' 자바스크립트의 예
<!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>
'Drive에 저장' 버튼 현지화
웹페이지에서 특정 언어를 지원하는 경우 window.___gcfg.lang 변수를 해당 언어로 설정합니다. 설정하지 않으면 사용자의 Google Drive 언어가 사용됩니다.
사용 가능한 언어 코드 값은 지원되는 언어 코드 목록을 참고하세요.
<!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 문제가 없는지 확인합니다.
큰 파일이 2MB로 잘리면 서버가 Content-Range를 노출하지 않을 가능성이 있으며, 이는 CORS 문제일 수 있습니다.