Dodaj przycisk „Zapisz na Dysku”

Przycisk „Zapisz na Dysku” umożliwia użytkownikom zapisywanie plików na Dysku z Twojej witryny. Załóżmy np., że Twoja witryna zawiera kilka instrukcji (w formacie PDF), które użytkownicy mogą pobrać. Przycisk „Zapisz na Dysku” można umieścić obok każdej instrukcji obsługi, co pozwoli użytkownikom zapisać podręczniki na Moim dysku.

Gdy użytkownik kliknie ten przycisk, plik jest pobierany ze źródła danych i przesyłany na Dysk Google w miarę odbierania danych. Pobieranie odbywa się w kontekście przeglądarki użytkownika, więc w ten sposób użytkownik może uwierzytelnić działanie i zapisać pliki przy użyciu ustalonej sesji przeglądarki.

Obsługiwane przeglądarki

Przycisk „Zapisz na Dysku” działa w tych przeglądarkach.

Dodawanie do strony przycisku „Zapisz na Dysku”

Aby utworzyć instancję przycisku „Zapisz na Dysku”, dodaj do swojej 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 adres URL pliku do zapisania.

  • Adresy URL mogą być bezwzględne lub względne.
  • Adres URL data-src może być udostępniany z tej samej domeny, subdomeny i protokołu co domena, w której hostowany jest przycisk. Musisz używać zgodnych protokołów między stroną a źródłem danych.
  • Identyfikatory URI danych i adresy URL file:// nie są obsługiwane.
  • Ze względu na tę samą zasadę dotyczącą źródła przeglądarki ten adres URL musi być udostępniany z tej samej domeny co strona, na której znajduje się strona, lub musi być dostępny za pomocą udostępniania zasobów w różnych źródłach (CORS). Jeśli przycisk i zasób znajdują się w różnych domenach, zapoznaj się z sekcją Obsługa przycisków i zasobów w różnych domenach.(#domain).
  • Aby udostępnić plik, gdy ta sama strona jest udostępniana zarówno przez 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 uzyskania dostępu do strony hostującej.

• data-filename to wymagany parametr zawierający nazwę użytej do zapisania pliku.

• data-sitename to wymagany parametr zawierający nazwę witryny internetowej, na której przesyłany jest plik.

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

Skrypt ten musi być wczytywany z wykorzystaniem protokołu HTTPS i można go dołączyć w dowolnym miejscu na stronie bez ograniczeń. Aby zwiększyć wydajność, możesz też wczytywać skrypt asynchronicznie.

Używanie wielu przycisków na stronie

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

Jeśli parametry data-src i data-filename są takie same w przypadku kilku przycisków, zapisanie za pomocą jednego przycisku spowoduje, że na wszystkich podobnych przyciskach będą widoczne te same informacje o postępie. Klikając wiele różnych przycisków, są one zapisywane po kolei.

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

Jeśli przycisk „Zapisz na Dysku” znajduje się na innej stronie niż źródło danych, żądanie zapisania pliku musi korzystać z funkcji udostępniania zasobów w różnych źródłach (CORS), aby uzyskać dostęp do zasobu. CORS to mechanizm umożliwiający aplikacji internetowej w jednej domenie dostęp do zasobów z serwera w innej domenie.

Jeśli na przykład na stronie http://example.com/page.html znajduje się przycisk „Zapisz na Dysku”, a źródło danych jest określone jako data-src="https://otherserver.com/files/file.pdf", przycisk nie uzyska dostępu do pliku PDF, chyba że przeglądarka może użyć narzędzia CORS do uzyskania dostępu do zasobu.

Adres URL data-src może być udostępniany z innej domeny, ale odpowiedzi 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

Pole Access-Control-Allow-Origin może mieć wartość *, aby zezwalać na CORS z dowolnej domeny, lub może też określać domeny, które mają dostęp do zasobu za pomocą CORS, np. http://example.com/page.html. Jeśli nie masz serwera do hostowania treści, rozważ użycie Google App Engine.

Więcej informacji znajdziesz w dokumentacji serwera na temat włączania CORS w źródle obsługującym przycisk „Zapisz na Dysku”. Więcej informacji o włączaniu serwera na potrzeby CORS znajdziesz w artykule Chcę dodać obsługę CORS do mojego serwera.

JavaScript API

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

Metoda	Opis
gapi.savetodrive.render( container, parameters )	Renderuje określony kontener jako widżet przycisku „Zapisz na Dysku”. kontener Kontener do renderowania jako przycisk „Zapisz na Dysku”. Podaj identyfikator kontenera (ciąg znaków) lub sam element DOM. Parametry Obiekt zawierający atrybuty tagu „Zapisz na Dysku” w postaci par 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 parsetags ma wartość explicit. Możesz to zrobić ze względu na wydajność. opt_container Kontener zawierający tagi przycisku „Zapisz na Dysku” do renderowania. Podaj identyfikator kontenera (ciąg znaków) lub sam element DOM. Jeśli pominiesz parametr opt_container, wszystkie tagi „Zapisz na Dysku” na stronie zostaną wyrenderowane.

Przykładowy kod JavaScript „Zapisz na Dysku” 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ładowy kod JavaScript „Zapisz na Dysku” z renderowaniem bezpośrednim

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

Lokalizowanie 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 zasada nie jest skonfigurowana, 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 pojawi się błąd XHR, sprawdź, czy zasób faktycznie istnieje i czy nie występuje problem CORS.

Jeśli rozmiar dużych plików jest ograniczony do 2 MB, prawdopodobnie serwer nie ujawnia zakresu treści, prawdopodobnie jest to problem z CORS.