Добавьте параметр «Сохранить на диск». кнопка

Кнопка «Сохранить на Диск» позволяет пользователям сохранять файлы с вашего веб-сайта на Google Диск. Например, предположим, что на вашем веб-сайте представлен список нескольких инструкций (PDF), которые пользователи могут скачать. Кнопку «Сохранить на Диск» можно разместить рядом с каждой инструкцией, чтобы пользователи могли сохранять инструкции в свой «Мой Диск».

Когда пользователь нажимает кнопку, файл загружается из источника данных и выгружается в Google Drive по мере поступления данных. Поскольку загрузка происходит в контексте браузера пользователя, этот процесс позволяет пользователю авторизоваться для сохранения файлов, используя установленную сессию браузера.

Поддерживаемые браузеры

The "Save to Drive" button supports these browsers.

Добавьте кнопку «Сохранить на Диск» на страницу.

To create an instance of the "Save to Drive" button, add the following script to your web page:

<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 is a required parameter that must be set to g-savetodrive if you are using a standard HTML tag.

• data-src is a required parameter containing the URL of the file to be saved.

  • URL-адреса могут быть абсолютными или относительными.
  • The data-src URL can be served from the same domain, subdomain, and protocol as the domain where the button is hosted. You must use matching protocols between the page and the data source.
  • URI данных и URL-адреса file:// не поддерживаются.
  • В соответствии с политикой браузера по отношению к одному источнику, этот URL-адрес должен обслуживаться с того же домена, что и страница, на которой он размещен, или быть доступен с использованием протокола CORS (Cross Origin Resource Sharing). Если кнопка и ресурс находятся на разных доменах, см. раздел «Обработка кнопок и ресурсов на разных доменах » (#domain).
  • Чтобы файл отображался, когда одна и та же страница отображается как по протоколу HTTP, так и по HTTPS, укажите ресурс без указания протокола, например, data-src="//example.com/files/file.pdf" , что позволит использовать соответствующий протокол в зависимости от способа доступа к странице.

• data-filename is a required parameter containing the name used for the save file.

• data-sitename is a required parameter containing the name of the web site providing the file.

Эти атрибуты можно применять к любому HTML-элементу. Однако наиболее часто используются элементы div , span или button . Каждый из этих элементов отображается немного по-разному во время загрузки страницы, поскольку браузер отрисовывает элемент до того, как JavaScript-код функции «Сохранить на Диск» повторно отрисует его.

This script must be loaded using the HTTPS protocol and can be included from any point on the page without restriction. You can also load the script asynchronously for improved performance.

Note: The button is rendered inline. The "Save to Drive" button can be wrapped in another element to make the initial layout look similar to the final layout.

Note: If the user navigates away from the page before the download is complete, the data is discarded and no file is created in Google Drive.

Используйте несколько кнопок на странице.

You can place multiple "Save to Drive" buttons on the same page. For example, you might have a button at the top and at the bottom of a long page.

Если параметры data-src и data-filename одинаковы для нескольких кнопок, сохранение с одной кнопки приведет к тому, что все похожие кнопки будут отображать одну и ту же информацию о ходе выполнения. Если нажато несколько разных кнопок, сохранение будет происходить последовательно.

Handle buttons and resources on different domains

Если кнопка «Сохранить на Диск» находится на отдельной странице от источника данных, запрос на сохранение файла должен использовать протокол CORS (Cross Origin Resource Sharing) для доступа к ресурсу. CORS — это механизм, позволяющий веб-приложению в одном домене получать доступ к ресурсам с сервера в другом домене.

Например, если на странице по адресу http://example.com/page.html размещена кнопка «Сохранить на Google Диск», а в качестве источника данных указан data-src="https://otherserver.com/files/file.pdf" , то кнопка не сможет получить доступ к PDF-файлу, если браузер не поддерживает CORS для доступа к ресурсу.

The data-src URL can be served from another domain but the responses from the HTTP server needs to support HTTP OPTION requests and include the following special HTTP headers:

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 на свой сервер» .

API JavaScript

JavaScript-код кнопки "Сохранить на Диск" определяет две функции отрисовки кнопки в пространстве имен gapi.savetodrive . Если вы отключите автоматическую отрисовку, вам необходимо вызвать одну из этих функций, установив для параметра parsetags значение explicit .

Метод	Описание
gapi.savetodrive. render ( container , parameters )	Renders the specified container as a "Save to Drive" button widget. контейнер The container to render as the "Save to Drive" button. Specify either the ID of the container (string) or the DOM element itself. параметры Объект, содержащий атрибуты тега "Сохранить на Диск" в виде пар ключ=значение, без префикса data- . Например, {"src": "//example.com/path/to/myfile.pdf", "filename": "My Statement.pdf", "sitename": "My Company Name"} .
gapi.savetodrive. go ( opt_container )	Renders all "Save to Drive" tags and classes in the specified container. This function should be used only if parsetags is set to explicit , which you might do for performance reasons. opt_container Контейнер, содержащий теги кнопки «Сохранить на Диск», который необходимо отобразить. Укажите либо идентификатор контейнера (строка), либо сам элемент DOM. Если параметр opt_container опущен, будут отображены все теги «Сохранить на Диск» на странице.

Example "Save to Drive" JavaScript with explicit load

<!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>

Example "Save to Drive" JavaScript with explicit render

    <!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>

Локализация кнопки «Сохранить на Диск»

If your web page supports a specific language, set the window.___gcfg.lang variable to that language. If not set, the user's Google Drive language is used.

For available language code values, see the list of supported language codes .

    <!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>

Поиск неисправностей

If you get an XHR error when downloading your data-src URL, verify that the resource actually exists, and that you do not have a CORS issue.

If large files are truncated to 2MB, it is likely that your server is not exposing Content-Range, likely a CORS issue.