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 w Twojej witrynie znajduje się lista kilku instrukcji obsługi (plików PDF), które użytkownicy mogą pobrać. Przycisk „Zapisz na Dysku” można umieścić obok każdej instrukcji, aby umożliwić użytkownikom zapisywanie instrukcji na Moim dysku.

Gdy użytkownik kliknie przycisk, plik zostanie pobrany ze źródła danych i przesłany na Dysk Google w miarę odbierania danych. Ponieważ pobieranie odbywa się w kontekście przeglądarki użytkownika, ten proces umożliwia uwierzytelnienie działania polegającego na zapisywaniu plików przy użyciu istniejącej sesji przeglądarki.

Obsługiwane przeglądarki

Przycisk „Zapisz na Dysku” jest obsługiwany przez te przeglądarki.

Dodawanie przycisku „Zapisz na Dysku” do strony

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

<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, 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. Strona i źródło danych muszą używać zgodnych protokołów.
  • Identyfikatory URI danych i adresy URL file:// nie są obsługiwane.
  • Ze względu na zasadę tego samego pochodzenia przeglądarki ten adres URL musi być obsługiwany z tej samej domeny co strona, na której się znajduje, 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 sekcją Obsługa przycisków i zasobów w różnych domenach (#domain).
  • Aby wyświetlać plik, gdy ta sama strona jest wyświetlana 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 w zależności od sposobu uzyskania dostępu do strony hostującej.

• data-filename to wymagany parametr zawierający nazwę używaną w przypadku zapisanego pliku.

• 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 używane elementy to jednak div, span i button. Każdy z tych elementów wyświetla się nieco inaczej podczas wczytywania strony, ponieważ przeglądarka renderuje element przed ponownym renderowaniem go przez kod JavaScript „Zapisz na Dysku”.

Ten skrypt musi być wczytywany za pomocą protokołu HTTPS i może być umieszczony w dowolnym miejscu na stronie bez ograniczeń. Aby zwiększyć wydajność, możesz też wczytywać skrypt asynchronicznie.

Uwaga: przycisk jest renderowany w linii. Przycisk „Zapisz na Dysku” można umieścić w innym elemencie, aby początkowy układ był podobny do końcowego.

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

Używanie wielu przycisków na stronie

Na tej samej stronie możesz umieścić wiele 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 kilku przycisków, zapisanie jednego z nich spowoduje, że wszystkie podobne przyciski będą wyświetlać te same informacje o postępie. 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 innej stronie niż źródło danych, żądanie zapisania pliku musi korzystać ze współdzielenia zasobów pomiędzy serwerami z różnych domen (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 przycisk „Zapisz na Dysku” znajduje się na stronie http://example.com/page.html, a źródło danych jest określone jako 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ć wyświetlany 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

Access-Control-Allow-Origin może mieć wartość *, aby zezwalać na CORS z dowolnej domeny, lub może 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 o włączaniu CORS z domeny, z której pochodzi przycisk „Zapisz na Dysku”, znajdziesz w dokumentacji serwera. Więcej informacji o włączaniu na serwerze obsługi CORS znajdziesz w sekcji Chcę dodać do serwera obsługę CORS.

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 )	Renderuje 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” 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 )	Wyświetla wszystkie tagi i klasy „Zapisz na Dysku” w określonym kontenerze. Tej funkcji należy używać tylko wtedy, gdy zasada parsetags ma wartość explicit, co może być przydatne ze względu na wydajność. opt_container Kontener zawierający tagi przycisku „Zapisz na Dysku” do renderowania. Określ identyfikator kontenera (ciąg znaków) lub sam element DOM. Jeśli parametr opt_container zostanie pominięty, wszystkie tagi „Zapisz na Dysku” na stronie zostaną wyrenderowane.

Przykładowy kod JavaScript „Zapisz na Dysku” z wyraźnym wczytaniem

<!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 wyraźnym 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>

Lokalizowanie przycisku „Zapisz na Dysku”

Jeśli strona internetowa obsługuje określony język, ustaw zmienną window.___gcfg.langna ten język. Jeśli nie zostanie ustawiony, 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 zakresu treści, co jest prawdopodobnie problemem z CORS.