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

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

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

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

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>

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

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

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