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

Über die Schaltfläche „In Google Drive speichern“ können Nutzer Dateien von Ihrer Website in Google Drive speichern. Angenommen, auf Ihrer Website sind mehrere Anleitungen (PDFs) aufgeführt, die Nutzer herunterladen können. Die Schaltfläche „In Drive speichern“ kann neben jedem Handbuch platziert werden, damit 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 nach und nach in Google Drive hochgeladen. Da der Download im Kontext des Browsers des Nutzers erfolgt, kann er die Aktion zum Speichern von Dateien mit seiner bestehenden Browser-Sitzung authentifizieren.

Unterstützte Browser

Die Schaltfläche „In Google Drive speichern“ wird von diesen Browsern unterstützt.

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

Wenn Sie eine Instanz der Schaltfläche „In Drive speichern“ erstellen möchten, fügen Sie Ihrer Webseite das folgende Script hinzu:

<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 Pflichtparameter, 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 data-src-URL kann von derselben Domain, Subdomain und demselben Protokoll wie die Domain ausgeliefert werden, auf der die Schaltfläche gehostet wird. Sie müssen übereinstimmende Protokolle zwischen der Seite und der Datenquelle verwenden.
  • Daten-URIs und file://-URLs werden nicht unterstützt.
  • Aufgrund der Same-Origin-Richtlinie des Browsers muss diese URL von derselben Domain wie die Seite ausgeliefert werden, auf der sie sich befindet, oder über Cross-Origin Resource Sharing (CORS) zugänglich sein. Wenn sich Schaltfläche und Ressource auf verschiedenen Domains befinden, lesen Sie den Hilfeartikel Schaltflächen und Ressourcen auf verschiedenen Domains verarbeiten(#domain).
  • Wenn die Datei bereitgestellt werden soll, wenn dieselbe Seite sowohl über http als auch über https bereitgestellt wird, geben Sie die Ressource ohne Protokoll an, z. B. data-src="//example.com/files/file.pdf". Dabei wird das entsprechende Protokoll verwendet, je nachdem, wie auf die Hostseite zugegriffen wurde.

• data-filename ist ein erforderlicher Parameter, der den Namen der zu speichernden Datei enthält.

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

Sie können diese Attribute auf jedes HTML-Element anwenden. Die am häufigsten verwendeten Elemente sind jedoch div, span oder button. Jedes dieser Elemente wird beim Laden der Seite etwas anders dargestellt, da der Browser das Element rendert, bevor es vom JavaScript-Code „In Drive speichern“ neu gerendert wird.

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

Hinweis :Die Schaltfläche wird inline gerendert. Die Schaltfläche „In Drive speichern“ kann in ein anderes Element eingefügt werden, damit das ursprüngliche Layout dem endgültigen Layout ähnelt.

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 Drive speichern“ auf derselben Seite platzieren. Beispielsweise können Sie oben und unten auf einer langen Seite eine Schaltfläche platzieren.

Wenn die Parameter data-src und data-filename für mehrere Schaltflächen identisch sind, werden beim Speichern über eine Schaltfläche für alle ähnlichen Schaltflächen dieselben Fortschrittsinformationen angezeigt. Wenn auf mehrere Schaltflächen geklickt wird, werden sie nacheinander gespeichert.

Schaltflächen und Ressourcen in verschiedenen Domains verarbeiten

Wenn sich die Schaltfläche „In Drive speichern“ auf einer anderen Seite als die Datenquelle befindet, muss der Speichervorgang 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 eines Servers in einer anderen Domain zugreifen kann.

Wenn beispielsweise die Schaltfläche „In Drive speichern“ auf einer Seite unter http://example.com/page.html platziert und die Datenquelle als data-src="https://otherserver.com/files/file.pdf" angegeben ist, kann die Schaltfläche nicht auf die PDF zugreifen, es sei denn, der Browser kann CORS verwenden, um auf die Ressource zuzugreifen.

Die data-src-URL kann von einer anderen Domain aus 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. Alternativ können Sie die Domains angeben, die über CORS auf die Ressource zugreifen dürfen, z. B. http://example.com/page.html. Wenn Sie keinen Server zum Hosten Ihrer Inhalte haben, können Sie die Google App Engine verwenden.

Weitere Informationen zum Aktivieren von CORS über den Ursprung, der die Schaltfläche „In Drive speichern“ bereitstellt, finden Sie in der Serverdokumentation. Weitere Informationen zum Aktivieren von CORS für Ihren Server finden Sie unter Ich möchte meinem Server CORS-Unterstützung hinzufügen.

JavaScript API

Im JavaScript-Code für die Schaltfläche „In Drive speichern“ werden zwei Funktionen zum Rendern der Schaltfläche im Namespace gapi.savetodrive definiert. 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 )	Rendert den angegebenen Container als Schaltflächen-Widget „In Google Drive speichern“. 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 mit Tag-Attributen für „In Drive speichern“ als Schlüssel/Wert-Paare, ohne die data--Präfixe. Beispiel: {"src": "//example.com/path/to/myfile.pdf", "filename": "My Statement.pdf", "sitename": "My Company Name"}
gapi.savetodrive.go( opt_container )	Hiermit werden alle „In Google Drive speichern“-Tags und -Klassen im angegebenen Container gerendert. Diese Funktion sollte nur verwendet werden, wenn parsetags auf explicit gesetzt ist. Dies kann aus Leistungsgründen sinnvoll sein. opt_container Der Container mit den zu rendernden Schaltflächen-Tags für „In Google Drive speichern“. 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 „In Google Drive speichern“-JavaScript 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 „In Google Drive speichern“-JavaScript mit explizitem Rendern

    <!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 nicht festgelegt, wird die Google Drive-Sprache des Nutzers verwendet.

Eine Liste der verfügbaren Sprachcodes 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 deiner data-src-URL ein XHR-Fehler auftritt, prüfe, ob die Ressource tatsächlich vorhanden ist und ob kein CORS vorliegt.

Wenn große Dateien auf 2 MB gekürzt werden, gibt dein Server wahrscheinlich keine Content-Range-Informationen an. Das ist wahrscheinlich ein CORS.