Dodaj przycisk „Zapisz na Dysku”

Przycisk „Zapisz na Dysku” umożliwia użytkownikom zapisywanie plików na Dysku z Twojej witryny. Załóżmy na przykład, że Twoja witryna zawiera kilka instrukcji (plików PDF), które użytkownicy mogą pobrać. Przycisk „Zapisz na Dysku” może być umieszczony obok każdego podręcznika, co pozwoli użytkownikom zapisywać podręczniki na Mojem dysku.

Gdy użytkownik kliknie przycisk, plik zostanie pobrany ze źródła danych i przesłany na Dysk Google w miarę otrzymywania danych. Ponieważ pobieranie odbywa się w kontekście przeglądarki użytkownika, proces ten pozwala użytkownikowi uwierzytelnić działanie polegające na zapisaniu plików za pomocą sesji przeglądarki.

Obsługiwane przeglądarki

Przycisk „Zapisz na Dysku” obsługuje te przeglądarki.

Dodawanie do strony przycisku „Zapisz na Dysku”

Aby utworzyć instancję przycisku „Zapisz na Dysku”, dodaj do strony internetowej ten skrypt:

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

Gdzie:

• class to wymagany parametr, który musi mieć wartość g-savetodrive, jeśli używasz standardowego tagu HTML.

• data-src to wymagany parametr zawierający URL pliku, który ma zostać zapisany.

  • Adresy URL mogą być bezwzględne lub względne.
  • Adres URL data-src może być wyświetlany z tej samej domeny, subdomeny i protokołu co domena, w której znajduje się przycisk. Na stronie i w źródle danych musisz używać tych samych protokołów.
  • Identyfikatory URI danych i adresy URL file:// nie są obsługiwane.
  • Ze względu na zasadę identyczności pochodzenia w przeglądarce ten adres URL musi być obsługiwany z tej samej domeny co strona, na której jest umieszczony, lub musi być dostępny za pomocą współdzielenia zasobów pomiędzy serwerami z różnych domen (CORS). Jeśli przycisk i zasób znajdują się w różnych domenach, zapoznaj się z artykułem Zarządzanie przyciskami i zasobami w różnych domenach.(#domain).
  • Aby wyświetlić plik, gdy ta sama strona jest wyświetlana zarówno w protokole http, jak i https, określ zasób bez protokołu, np. data-src="//example.com/files/file.pdf", który używa odpowiedniego protokołu na podstawie sposobu dostępu do strony hostującej.

• data-filename to wymagany parametr zawierający nazwę pliku zapisu.

• data-sitename to wymagany parametr zawierający nazwę witryny, która udostępnia plik.

Możesz umieścić te atrybuty w dowolnym elemencie HTML. Najczęściej jednak używane są elementy div, span lub button. Każdy z tych elementów wyświetla się nieco inaczej podczas wczytywania strony, ponieważ przeglądarka renderuje go przed ponownym wyrenderowaniem przez kod JavaScript elementu „Zapisz na Dysku”.

Skrypt musi być wczytywany za pomocą protokołu HTTPS i może być dołączany z dowolnego miejsca na stronie bez ograniczeń. Aby zwiększyć wydajność, możesz też wczytać skrypt asynchronicznie.

Uwaga: przycisk jest renderowany w linii. Przycisk „Zapisz na Dysku” może być umieszczony w innym elemencie, aby początkowy układ wyglądał podobnie do układu końcowego.

Uwaga: jeśli użytkownik opuści stronę przed zakończeniem pobierania, dane zostaną odrzucone, a na Dysku Google nie zostanie utworzony plik.

Używanie wielu przycisków na stronie

Na tej samej stronie możesz umieścić kilka przycisków „Zapisz na Dysku”. Możesz na przykład umieścić przycisk u góry i u dołu długiej strony.

Jeśli parametry data-src i data-filename są takie same w przypadku wielu przycisków, zapisanie ustawień z jednego przycisku spowoduje wyświetlenie tych samych informacji o postępie na wszystkich podobnych przyciskach. Jeśli klikniesz kilka różnych przycisków, zostaną one zapisane kolejno.

Obsługa przycisków i zasobów w różnych domenach

Jeśli przycisk „Zapisz na Dysku” znajduje się na osobnej stronie niż źródło danych, żądanie zapisania pliku musi używać współdzielenia zasobów pomiędzy serwerami z różnych domen (CORS), aby uzyskać dostęp do zasobu. CORS to mechanizm, który umożliwia aplikacji internetowej w jednej domenie dostęp do zasobów na serwerze w innej domenie.

Jeśli np. na stronie w http://example.com/page.html znajduje się przycisk „Zapisz na Dysku”, a źródło danych to data-src="https://otherserver.com/files/file.pdf", przycisk nie będzie miał dostępu do pliku PDF, chyba że przeglądarka będzie mogła użyć CORS do uzyskania dostępu do zasobu.

Adres URL data-src może być obsługiwany z innej domeny, ale odpowiedzi z serwera HTTP muszą obsługiwać żądania HTTP OPTION i zawierać te specjalne nagłówki HTTP:

Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Range
Access-Control-Expose-Headers: Cache-Control, Content-Encoding, Content-Range

Wartość Access-Control-Allow-Origin może wynosić *, co oznacza, że CORS jest dozwolony z dowolnej domeny. Możesz też określić domeny, które mają dostęp do zasobu za pomocą CORS, np. http://example.com/page.html. Jeśli nie masz serwera, na którym możesz hostować treści, rozważ użycie Google App Engine.

Więcej informacji o włączaniu CORS znajdziesz w dokumentacji serwera, który obsługuje przycisk „Zapisz na Dysku”. Więcej informacji o włączaniu serwera do obsługi CORS znajdziesz w artykule Chcę dodać obsługę CORS na serwerze.

JavaScript API

Kod JavaScript przycisku „Zapisz na Dysku” definiuje 2 funkcje renderowania przycisku w przestrzeni nazw gapi.savetodrive. Jeśli wyłączysz automatyczne renderowanie, musisz wywołać jedną z tych funkcji, ustawiając wartość parsetags na explicit.

Metoda	Opis
gapi.savetodrive.render( container, parameters )	Wyświetla określony kontener jako widżet przycisku „Zapisz na Dysku”. kontener Kontener, który ma być renderowany jako przycisk „Zapisz na Dysku”. Określ identyfikator kontenera (ciąg znaków) lub sam element DOM. parametry Obiekt zawierający atrybuty tagu „Zapisz na Dysku” jako pary klucz-wartość bez prefiksów data-. Na przykład:{"src": "//example.com/path/to/myfile.pdf", "filename": "My Statement.pdf", "sitename": "My Company Name"}.
gapi.savetodrive.go( opt_container )	Renderuje wszystkie tagi i klasy „Zapisz na Dysku” w określonym kontenerze. Tej funkcji należy używać tylko wtedy, gdy opcja parsetags ma wartość explicit, co może być konieczne ze względu na wydajność. opt_container Kontener zawierający tagi przycisku „Zapisz na Dysku”, które mają zostać wyrenderowane. Określ identyfikator kontenera (ciąg znaków) lub sam element DOM. Jeśli parametr opt_container zostanie pominięty, wszystkie tagi „Save to Drive” na stronie zostaną wyrenderowane.

Przykład kodu JavaScript „Zapisz na Dysk” z jawnym wczytywaniem

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

Przykład kodu JavaScript „Zapisz na Dysku” z jawnym renderowaniem

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

Lokalizacja przycisku „Zapisz na Dysku”

Jeśli Twoja strona internetowa obsługuje określony język, ustaw zmienną window.___gcfg.lang na ten język. Jeśli nie jest skonfigurowany, używany jest język Dysku Google użytkownika.

Dostępne wartości kodów języków znajdziesz na liście obsługiwanych kodów języków.

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

Rozwiązywanie problemów

Jeśli podczas pobierania adresu URL data-src wystąpi błąd XHR, sprawdź, czy zasób rzeczywiście istnieje i czy nie występuje problem z CORS.

Jeśli duże pliki są obcinane do 2 MB, prawdopodobnie serwer nie udostępnia nagłówka Content-Range. Prawdopodobnie jest to problem z CORS.