Как добавить кнопку "Сохранить на Диске"

Кнопка "Сохранить на Диске" позволяет пользователям сохранять файлы на Диске с вашего сайта. Например, на вашем сайте есть несколько руководств по эксплуатации в формате 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 должен относиться к тому же домену, что и страница, на которой он размещен, или быть доступным через технологию совместного использования ресурсов между разными источниками (CORS). Если кнопка и ресурс находятся в разных доменах, ознакомьтесь с разделом Как работать с кнопками и ресурсами в разных доменах.
  • Чтобы файл показывался, когда одна и та же страница загружается по протоколам HTTP и HTTPS, укажите ресурс без протокола, например data-src="//example.com/files/file.pdf". В этом случае будет использоваться протокол, по которому была загружена страница.

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

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

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

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

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

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

Как использовать несколько кнопок на одной странице

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

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

Как обрабатывать кнопки и ресурсы в разных доменах

Если кнопка "Сохранить на Диске" находится на другой странице, нежели источник данных, то для доступа к ресурсу в запросе на сохранение файла должна использоваться технология совместного использования ресурсов между разными источниками (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 на сервере…

JavaScript API

Код 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.