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

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

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

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

  • URL-адреса могут быть абсолютными или относительными.
  • URL-адрес data-src может обслуживаться с того же домена, поддомена и протокола, что и домен, на котором размещена кнопка. Необходимо использовать совпадающие протоколы между страницей и источником данных.
  • URI данных и URL-адреса file:// не поддерживаются.
  • В соответствии с политикой браузера по отношению к одному источнику, этот URL-адрес должен обслуживаться с того же домена, что и страница, на которой он размещен, или быть доступен с использованием протокола CORS (Cross Origin Resource Sharing). Если кнопка и ресурс находятся на разных доменах, см. раздел «Обработка кнопок и ресурсов на разных доменах » (#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 (Cross Origin Resource Sharing) для доступа к ресурсу. CORS — это механизм, позволяющий веб-приложению в одном домене получать доступ к ресурсам с сервера в другом домене.

Например, если на странице по адресу http://example.com/page.html размещена кнопка «Сохранить на Google Диск», а в качестве источника данных указан 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 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>

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

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

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