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, auf Ihrer Website sind mehrere Bedienungsanleitungen (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 in Google Drive hochgeladen, sobald Daten empfangen werden. Da der Download im Kontext des Nutzerbrowsers erfolgt, kann der Nutzer die Aktion zum Speichern von Dateien über seine bestehende Browsersitzung authentifizieren.

Unterstützte Browser

Die Schaltfläche „In 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 Skript 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 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 data-src-URL kann von derselben Domain, Subdomain und demselben Protokoll wie die Domain bereitgestellt werden, auf der sich die Schaltfläche befindet. Sie müssen übereinstimmende Protokolle für die Seite und die 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 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 verschiedenen Domains befinden, lesen Sie den Abschnitt Schaltflächen und Ressourcen in 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". In diesem Fall wird das entsprechende Protokoll verwendet, je nachdem, wie auf die Hostseite zugegriffen wurde.

• data-filename ist ein erforderlicher Parameter, der den Namen der Speicherdatei 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 in jedes HTML-Element einfügen. Die am häufigsten verwendeten Elemente sind jedoch div, span oder button. Jedes dieser Elemente wird während des Ladens der Seite etwas anders dargestellt, da der Browser das Element rendert, bevor das JavaScript „In Drive speichern“ das Element neu rendert.

Das 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 „In Drive speichern“-Schaltflächen auf derselben Seite platzieren. Sie haben beispielsweise oben und unten auf einer langen Seite eine Schaltfläche.

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 verschiedene Schaltflächen geklickt wird, werden die Änderungen nacheinander gespeichert.

Schaltflächen und Ressourcen in verschiedenen Domains verarbeiten

Wenn sich die Schaltfläche „In Drive speichern“ auf einer separaten Seite von der Datenquelle befindet, muss für die Anfrage zum Speichern der Datei Cross-Origin Resource Sharing (CORS) verwendet werden, 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 eine Schaltfläche „In Drive speichern“ auf einer Seite unter http://example.com/page.html platziert ist und die Datenquelle als data-src="https://otherserver.com/files/file.pdf" angegeben ist, kann über die Schaltfläche nicht auf die PDF-Datei zugegriffen werden, es sei denn, der Browser kann CORS verwenden, um auf die Ressource zuzugreifen.

Die data-src-URL 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 einer beliebigen 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, sollten Sie Google App Engine verwenden.

Weitere Informationen dazu, wie Sie CORS für den Ursprung aktivieren, von dem die Schaltfläche „Auf Google Drive speichern“ bereitgestellt wird, finden Sie in der Dokumentation Ihres Servers. Weitere Informationen zum Aktivieren von CORS auf Ihrem Server finden Sie unter Ich möchte meinem Server CORS-Unterstützung hinzufügen.

JavaScript API

Im JavaScript für die Schaltfläche „In Drive speichern“ werden zwei Funktionen zum Rendern von Schaltflächen im Namespace gapi.savetodrive definiert. Wenn Sie das automatische Rendern 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 „In Google Drive speichern“-Schaltflächen-Widget. 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 Drive speichern“-Tag-Attribute als Schlüssel/Wert-Paare ohne die data--Präfixe enthält. Beispiel: {"src": "//example.com/path/to/myfile.pdf", "filename": "My Statement.pdf", "sitename": "My Company Name"}
gapi.savetodrive.go( opt_container )	Rendert alle „In Google Drive speichern“-Tags und -Klassen im angegebenen Container. Diese Funktion sollte nur verwendet werden, wenn parsetags auf explicit gesetzt ist. Das kann aus Leistungsgründen sinnvoll sein. opt_container Der Container mit den Tags für die Schaltfläche „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 „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 window.___gcfg.lang-Variable auf diese Sprache fest. Wenn nicht festgelegt, wird die Sprache verwendet, die der Nutzer in Google Drive eingestellt hat.

Die verfügbaren Sprachcode-Werte 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 ob Sie ein CORS-Problem haben.

Wenn große Dateien auf 2 MB gekürzt werden, stellt Ihr Server wahrscheinlich keinen Content-Range zur Verfügung. Das ist wahrscheinlich ein CORS-Problem.