이 페이지는 Cloud Translation API를 통해 번역되었습니다.

'Drive에 저장' 버튼을 추가합니다.

'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이거나 상대 URL일 수 있습니다.
- data-src URL은 버튼이 호스팅되는 도메인과 동일한 도메인, 하위 도메인, 프로토콜에서 제공될 수 있습니다. 페이지와 데이터 소스 간에 일치하는 프로토콜을 사용해야 합니다.
- 데이터 URI 및 file:// URL은 지원되지 않습니다.
- 브라우저의 동일 출처 정책으로 인해 이 URL은 배치된 페이지와 동일한 도메인에서 제공되거나 교차 출처 리소스 공유 (CORS)를 사용하여 액세스할 수 있어야 합니다. 버튼과 리소스가 다른 도메인에 있는 경우 다른 도메인에서 버튼 및 리소스 처리를 참고하세요.(#domain).
- http와 https에서 동일한 페이지가 제공될 때 파일을 제공하려면 호스팅 페이지에 액세스한 방식에 따라 적절한 프로토콜을 사용하는 data-src="//example.com/files/file.pdf"와 같은 프로토콜 없이 리소스를 지정하세요.
data-filename는 저장 파일에 사용되는 이름을 포함하는 필수 매개변수입니다.
data-sitename는 파일을 제공하는 웹사이트의 이름이 포함된 필수 매개변수입니다.

이러한 속성은 모든 HTML 요소에 배치할 수 있습니다. 하지만 가장 많이 사용되는 요소는 div, span, button입니다. 'Drive에 저장' JavaScript가 요소를 다시 렌더링하기 전에 브라우저가 요소를 렌더링하기 때문에 이러한 요소는 페이지가 로드되는 동안 약간 다르게 표시됩니다.

이 스크립트는 HTTPS 프로토콜을 사용하여 로드해야 하며 페이지의 어느 포인트에서 제한 없이 포함할 수 있습니다. 성능을 개선하기 위해 스크립트를 비동기식으로 로드할 수도 있습니다.

페이지에 여러 버튼 사용

한 페이지에 여러 개의 'Drive에 저장' 버튼을 배치할 수 있습니다. 예를 들어 긴 페이지의 상단과 하단에 버튼이 있을 수 있습니다.

여러 버튼의 data-src 및 data-filename 매개변수가 동일한 경우 한 버튼에서 저장하면 유사한 모든 버튼에 동일한 진행률 정보가 표시됩니다. 여러 개의 서로 다른 버튼을 클릭하면 순차적으로 저장됩니다.

여러 도메인의 버튼 및 리소스 처리

'Drive에 저장' 버튼이 데이터 소스와 별도의 페이지에 있는 경우 파일 저장 요청은 교차 출처 리소스 공유 (CORS)를 사용하여 리소스에 액세스해야 합니다. CORS는 한 도메인의 웹 애플리케이션이 다른 도메인의 서버에 있는 리소스에 액세스할 수 있도록 허용하는 메커니즘입니다.

예를 들어 http://example.com/page.html의 페이지에 'Drive에 저장' 버튼이 배치되어 있고 데이터 소스가 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를 허용하도록 * 값을 가질 수 있으며, 또는 http://example.com/page.html와 같이 CORS를 통해 리소스에 액세스할 수 있는 도메인을 지정할 수도 있습니다. 콘텐츠를 호스팅할 서버가 없는 경우 Google App Engine을 사용하는 것이 좋습니다.

자세한 내용은 'Drive에 저장' 버튼을 제공하는 출처에서 CORS를 사용 설정하는 방법에 관한 서버 문서를 참고하세요. CORS를 위해 서버를 사용 설정하는 방법에 관한 자세한 내용은 서버에 CORS 지원을 추가하려고 합니다를 참고하세요.

JavaScript API

'Drive에 저장' 버튼 JavaScript는 gapi.savetodrive 네임스페이스 아래에 두 개의 버튼 렌더링 함수를 정의합니다. 자동 렌더링을 사용 중지하는 경우 parsetags를 explicit로 설정하여 이러한 함수 중 하나를 호출해야 합니다.

메서드 설명

메서드	설명
`gapi.savetodrive.render( container, parameters )`	지정된 컨테이너를 'Drive에 저장' 버튼 위젯으로 렌더링합니다. 컨테이너 'Drive에 저장' 버튼으로 렌더링할 컨테이너입니다. 컨테이너의 ID(문자열)나 DOM 요소 자체를 지정합니다. 매개변수 `data-` 접두사 없이 'Drive에 저장' 태그 속성을 키=값 쌍으로 포함하는 객체입니다. 예를 들면 `{"src": "//example.com/path/to/myfile.pdf", "filename": "My Statement.pdf", "sitename": "My Company Name"}`입니다.
`gapi.savetodrive.go( opt_container )`	지정된 컨테이너의 모든 'Drive에 저장' 태그와 클래스를 렌더링합니다. 이 함수는 `parsetags`가 `explicit`로 설정된 경우에만 사용해야 하며, 이는 성능상의 이유로 설정할 수 있습니다. opt_container 렌더링할 'Drive에 저장' 버튼 태그가 포함된 컨테이너입니다. 컨테이너의 ID (문자열)나 DOM 요소 자체를 지정합니다. `opt_container` 매개변수를 생략하면 페이지의 모든 'Drive에 저장' 태그가 렌더링됩니다.

gapi.savetodrive.render(

container,
 parameters
)

지정된 컨테이너를 'Drive에 저장' 버튼 위젯으로 렌더링합니다.

컨테이너: 'Drive에 저장' 버튼으로 렌더링할 컨테이너입니다. 컨테이너의 ID(문자열)나 DOM 요소 자체를 지정합니다.
매개변수: data- 접두사 없이 'Drive에 저장' 태그 속성을 키=값 쌍으로 포함하는 객체입니다. 예를 들면 {"src": "//example.com/path/to/myfile.pdf", "filename": "My Statement.pdf", "sitename": "My Company Name"}입니다.

gapi.savetodrive.go(
 opt_container
)

지정된 컨테이너의 모든 'Drive에 저장' 태그와 클래스를 렌더링합니다. 이 함수는 parsetags가 explicit로 설정된 경우에만 사용해야 하며, 이는 성능상의 이유로 설정할 수 있습니다.

opt_container: 렌더링할 'Drive에 저장' 버튼 태그가 포함된 컨테이너입니다. 컨테이너의 ID (문자열)나 DOM 요소 자체를 지정합니다. opt_container 매개변수를 생략하면 페이지의 모든 'Drive에 저장' 태그가 렌더링됩니다.

명시적 로드가 포함된 '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>

명시적 렌더링이 포함된 '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>

'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 문제일 수 있습니다.