Fügen Sie die Schaltfläche „In Google Drive speichern“ hinzu.

Mit der Schaltfläche „In Google Drive speichern“ können Nutzer Dateien von Ihrer Website in Google Drive speichern. Angenommen, Ihre Website enthält mehrere Bedienungsanleitungen (PDFs), die Nutzer herunterladen können. Die Schaltfläche „In Google Drive speichern“ kann neben jedem Handbuch platziert werden, sodass Nutzer Handbücher in „Meine Ablage“ speichern können.

Wenn der Nutzer auf die Schaltfläche klickt, wird die Datei aus der Datenquelle heruntergeladen und in Google Drive hochgeladen, sobald Daten empfangen werden. Da der Download im Kontext des Browsers des Nutzers erfolgt, ermöglicht dieser Vorgang dem Nutzer, die Aktion zum Speichern von Dateien über die vorhandene Browsersitzung zu authentifizieren.

Unterstützte Browser

Die Schaltfläche „In Google Drive speichern“ wird für diese Browser unterstützt.

Schaltfläche „In Google Drive speichern“ zu einer Seite hinzufügen

Fügen Sie Ihrer Webseite das folgende Skript hinzu, um eine Instanz der Schaltfläche „In Google Drive speichern“ zu erstellen:

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

Wobei:

• class ist ein erforderlicher Parameter, der auf g-savetodrive festgelegt werden muss, wenn Sie ein Standard-HTML-Tag verwenden.

• data-src ist ein erforderlicher Parameter, der die URL der zu speichernden Datei enthält.

  • URLs können absolut oder relativ sein.
  • Die URL data-src kann von derselben Domain, Subdomain und demselben Protokoll wie die Domain bereitgestellt werden, in der die Schaltfläche gehostet wird. Sie müssen Abgleichprotokolle zwischen der Seite und der Datenquelle verwenden.
  • Daten-URIs und file://-URLs werden nicht unterstützt.
  • Aufgrund derselben Ursprungsrichtlinie des Browsers muss diese URL von derselben Domain wie die Seite bereitgestellt werden, auf der sie platziert ist, oder über Cross-Origin Resource Sharing (CORS) zugänglich sein. Wenn sich die Schaltfläche und die Ressource in unterschiedlichen Domains befinden, lesen Sie Schaltflächen und Ressourcen in verschiedenen Domains verarbeiten.(#domain).
  • Damit die Datei bereitgestellt werden kann, wenn dieselbe Seite sowohl über HTTP als auch über HTTPS bereitgestellt wird, geben Sie die Ressource ohne ein Protokoll wie data-src="//example.com/files/file.pdf" an. Dabei wird das entsprechende Protokoll verwendet, je nachdem, wie auf die Hostseite zugegriffen wurde.

• data-filename ist ein erforderlicher Parameter, der den für die Speicherdatei verwendeten Namen enthält.

• data-sitename ist ein erforderlicher Parameter, der den Namen der Website enthält, von der die Datei bereitgestellt wird.

Sie können diese Attribute in jedem HTML-Element platzieren. Am häufigsten werden jedoch div, span oder button verwendet. Jedes dieser Elemente wird beim Laden der Seite leicht unterschiedlich angezeigt, da der Browser das Element vor dem JavaScript für „In Google Drive speichern“ rendert.

Dieses Script muss mit dem HTTPS-Protokoll geladen werden und kann von jedem Punkt der Seite ohne Einschränkung eingefügt werden. Sie können das Skript auch asynchron laden, um die Leistung zu verbessern.

Hinweis: Die Schaltfläche wird inline gerendert. Die Schaltfläche „In Google Drive speichern“ kann in ein anderes Element eingebunden werden, sodass das ursprüngliche Layout ähnlich aussieht wie das endgültige Layout.

Hinweis :Wenn der Nutzer die Seite verlässt, bevor der Download abgeschlossen ist, werden die Daten verworfen und es wird keine Datei in Google Drive erstellt.

Mehrere Schaltflächen auf einer Seite verwenden

Sie können mehrere Schaltflächen „In Google Drive speichern“ auf derselben Seite platzieren. Auf einer langen Seite kann es beispielsweise oben und unten eine Schaltfläche geben.

Wenn die Parameter data-src und data-filename für mehrere Schaltflächen identisch sind, führt das Speichern von einer Schaltfläche dazu, dass alle ähnlichen Schaltflächen dieselben Fortschrittsinformationen anzeigen. Wenn mehrere Schaltflächen angeklickt werden, werden diese nacheinander gespeichert.

Schaltflächen und Ressourcen in verschiedenen Domains verwalten

Wenn sich die Schaltfläche „In Google Drive speichern“ auf einer anderen Seite als die Datenquelle befindet, muss die Anfrage zum Speichern der Datei Cross-Origin Resource Sharing (CORS) verwenden, um auf die Ressource zuzugreifen. CORS ist ein Mechanismus, mit dem eine Webanwendung in einer Domain auf Ressourcen von einem Server in einer anderen Domain zugreifen kann.

Wenn beispielsweise auf einer Seite unter http://example.com/page.html die Schaltfläche „In Google Drive speichern“ platziert ist und als Datenquelle data-src="https://otherserver.com/files/file.pdf" angegeben ist, kann die Schaltfläche nur dann auf die PDF-Datei zugreifen, wenn der Browser CORS für den Zugriff auf die Ressource verwendet.

Die URL data-src kann von einer anderen Domain bereitgestellt werden. Die Antworten des HTTP-Servers müssen jedoch HTTP-OPTION-Anfragen unterstützen und die folgenden speziellen HTTP-Header enthalten:

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

Access-Control-Allow-Origin kann den Wert * haben, um CORS von jeder Domain zuzulassen, oder alternativ die Domains angeben, die über CORS Zugriff auf die Ressource haben, z. B. http://example.com/page.html. Wenn Sie keinen Server zum Hosten Ihrer Inhalte haben, sollten Sie Google App Engine verwenden.

Weitere Informationen finden Sie in der Serverdokumentation zum Aktivieren von CORS aus dem Ursprung, der für die Schaltfläche „In Google Drive speichern“ bereitgestellt wird. Weitere Informationen zum Aktivieren Ihres Servers für CORS finden Sie unter Ich möchte meinem Server CORS-Unterstützung hinzufügen.

JavaScript API

Der JavaScript-Code für die Schaltfläche „In Google Drive speichern“ definiert zwei Funktionen zum Rendern von Schaltflächen im Namespace gapi.savetodrive. Wenn Sie das automatische Rendering deaktivieren, müssen Sie eine dieser Funktionen aufrufen, indem Sie parsetags auf explicit setzen.

Methode	Beschreibung
gapi.savetodrive.render( container, parameters )	Stellt den angegebenen Container als Schaltflächen-Widget "In Google Drive speichern" dar. Container Der Container, der als Schaltfläche „In Google Drive speichern“ gerendert werden soll. Geben Sie entweder die ID des Containers (String) oder das DOM-Element selbst an. Parameter Ein Objekt, das „In Google Drive speichern“-Tag-Attribute als Schlüssel/Wert-Paare ohne das Präfix data- enthält. Beispiel: {"src": "//example.com/path/to/myfile.pdf", "filename": "My Statement.pdf", "sitename": "My Company Name"}
gapi.savetodrive.go( opt_container )	Diese Methode rendert alle „In Google Drive speichern“-Tags und -Klassen im angegebenen Container. Diese Funktion sollte nur verwendet werden, wenn parsetags auf explicit gesetzt ist. Dies kann aus Leistungsgründen der Fall sein. opt_container Der Container mit den Schaltflächen-Tags „In Google Drive speichern“, die gerendert werden sollen. Geben Sie entweder die ID des Containers (String) oder das DOM-Element selbst an. Wenn der Parameter opt_container weggelassen wird, werden alle „In Google Drive speichern“-Tags auf der Seite gerendert.

Beispiel für JavaScript-Code zum Speichern in Google Drive mit explizitem Laden

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

Beispiel für JavaScript-Code zum Speichern in Google Drive mit explizitem Rendering

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

Schaltfläche „In Google Drive speichern“ lokalisieren

Wenn Ihre Webseite eine bestimmte Sprache unterstützt, legen Sie die Variable window.___gcfg.lang auf diese Sprache fest. Wenn die Richtlinie nicht konfiguriert ist, wird die Google Drive-Sprache des Nutzers verwendet.

Die verfügbaren Sprachcodewerte finden Sie in der Liste der unterstützten Sprachcodes.

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

Fehlerbehebung

Wenn beim Herunterladen der data-src-URL ein XHR-Fehler auftritt, prüfen Sie, ob die Ressource tatsächlich vorhanden ist und kein CORS-Problem vorliegt.

Wenn große Dateien auf 2 MB gekürzt werden, gibt Ihr Server „Content-Range“ wahrscheinlich nicht frei. Dies ist wahrscheinlich ein CORS-Problem.