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

Кнопка «Сохранить на Диск» позволяет пользователям сохранять файлы с вашего сайта на Диск. Например, предположим, что на вашем сайте представлено несколько руководств (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 — обязательный параметр, который необходимо задать как g-savetodrive если вы используете стандартный HTML-тег.

• data-src — обязательный параметр, содержащий URL-адрес сохраняемого файла.

  • URL-адреса могут быть абсолютными или относительными.
  • URL data-src может быть предоставлен из того же домена, поддомена и протокола, что и домен, на котором размещена кнопка. Необходимо использовать совпадающие протоколы между страницей и источником данных.
  • URI данных и URL-адреса file:// не поддерживаются.
  • В связи с политикой браузера в отношении одинакового источника этот URL-адрес должен обслуживаться из того же домена, что и страница, на которой он размещен, или быть доступен с помощью Cross Origin Resource Sharing (CORS). Если кнопка и ресурс находятся в разных доменах, см. раздел Управление кнопками и ресурсами в разных доменах (#domain).
  • Чтобы обслужить файл, когда одна и та же страница обслуживается как по http, так и по https, укажите ресурс без протокола, например data-src="//example.com/files/file.pdf" , который использует соответствующий протокол в зависимости от способа доступа к странице хостинга.

• data-filename — обязательный параметр, содержащий имя, используемое для файла сохранения.

• data-sitename — обязательный параметр, содержащий имя веб-сайта, предоставившего файл.

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

Этот скрипт должен быть загружен по протоколу HTTPS и может быть подключен из любой точки страницы без ограничений. Вы также можете загрузить скрипт асинхронно для повышения производительности.

Примечание: кнопка отображается в строке. Кнопку «Сохранить на Диске» можно поместить в другой элемент, чтобы исходный макет был похож на финальный.

Примечание: если пользователь покидает страницу до завершения загрузки, данные удаляются и файл на Google Диске не создается.

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

Вы можете разместить несколько кнопок «Сохранить на Диске» на одной странице. Например, можно разместить по одной кнопке вверху и внизу длинной страницы.

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

Управление кнопками и ресурсами на разных доменах

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

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

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

API JavaScript

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

Метод	Описание
gapi.savetodrive. render ( container , parameters )	Отображает указанный контейнер как виджет кнопки «Сохранить на Диске». контейнер Контейнер, который будет отображаться как кнопка «Сохранить на Диске». Укажите либо идентификатор контейнера (строку), либо сам DOM-элемент. параметры Объект, содержащий атрибуты тега «Сохранить на Диске» в виде пар «ключ=значение» без префиксов 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 Контейнер, содержащий теги кнопки «Сохранить на Диске» для отображения. Укажите идентификатор контейнера (строку) или сам 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>

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

Если при загрузке URL-адреса data-src возникает ошибка XHR, убедитесь, что ресурс действительно существует и что у вас нет проблем с CORS .

Если большие файлы обрезаются до 2 МБ, скорее всего, ваш сервер не предоставляет Content-Range, что может быть связано с проблемой CORS .