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 deiner Website sind mehrere Bedienungsanleitungen (PDFs) aufgeführt, die Nutzer herunterladen können. Die Schaltfläche „In Drive speichern“ kann neben jeder Anleitung platziert werden, damit Nutzer Anleitungen in „Meine Ablage“ speichern können.

Wenn der Nutzer auf die Schaltfläche klickt, wird die Datei aus der Datenquelle heruntergeladen und beim Empfang der Daten in Google Drive hochgeladen. Da der Download im Kontext des Browsers des Nutzers erfolgt, kann der Nutzer die Aktion zum Speichern von Dateien über seine bestehende Browsersitzung authentifizieren.

Unterstützte Browser

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

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

Wenn Sie eine Instanz der Schaltfläche „In Google 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 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 die Schaltfläche gehostet wird. Sie müssen zwischen der Seite und der Datenquelle übereinstimmende Protokolle verwenden.
  • Daten-URIs und file://-URLs werden nicht unterstützt.
  • Aufgrund der Same-Origin-Policy 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 auf verschiedenen Domains befinden, lesen Sie den Abschnitt Schaltflächen und Ressourcen auf verschiedenen Domains verarbeiten.
  • Wenn die Datei 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". Dadurch wird das entsprechende Protokoll verwendet, je nachdem, wie auf die Hostingseite 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, die die Datei bereitstellt.

Sie können diese Attribute für jedes HTML-Element festlegen. Die am häufigsten verwendeten Elemente sind jedoch div, span oder button. Jedes dieser Elemente wird beim Laden der Seite etwas anders angezeigt, da der Browser das Element rendert, bevor das JavaScript „In Drive speichern“ das Element noch einmal rendert.

Dieses Script muss über das HTTPS-Protokoll geladen werden und kann ohne Einschränkung von einer beliebigen Stelle auf der Seite eingebunden werden. Sie können das Script auch asynchron laden, um die Leistung zu verbessern.

Hinweis: Der Button wird inline gerendert. Die Schaltfläche „In Google Drive speichern“ kann in ein anderes Element eingebunden 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 Google Drive speichern“-Schaltflächen auf derselben Seite platzieren. Sie können beispielsweise oben und unten auf einer langen Seite eine Schaltfläche einfügen.

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

Umgang mit Schaltflächen und Ressourcen in verschiedenen Domains

Wenn sich die Schaltfläche „In 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 die 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 die Schaltfläche nicht auf die PDF-Datei zugreifen, es sei denn, der Browser kann CORS für den Zugriff auf die Ressource verwenden.

Die data-src-URL kann von einer anderen Domain bereitgestellt werden, aber die Antworten vom HTTP-Server müssen 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, 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, können Sie Google App Engine verwenden.

Weitere Informationen zum Aktivieren von CORS auf dem Ursprungsserver, auf dem sich die Schaltfläche „In Google Drive speichern“ befindet, finden Sie in der Dokumentation zu Ihrem Server. Weitere Informationen zum Aktivieren von CORS auf Ihrem Server finden Sie unter Ich möchte meinem Server CORS-Unterstützung hinzufügen.

JavaScript API

Das JavaScript für die Schaltfläche „In Google Drive speichern“ definiert zwei Funktionen zum Rendern der Schaltfläche 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 )	Rendert den angegebenen Container als Widget für die Schaltfläche „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, das die Tag-Attribute für „In Drive speichern“ als Schlüssel/Wert-Paare enthält, ohne die Präfixe data-. 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. Dies kann aus Leistungsgründen sinnvoll sein. opt_container Der Container, der die Tags für die Schaltfläche „In Google Drive speichern“ enthält, 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 „In Google Drive speichern“ 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 für „In Google Drive speichern“ 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 nicht festgelegt, wird die Google Drive-Sprache des Nutzers verwendet.

Die 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 Sie beim Herunterladen der data-src-URL einen XHR-Fehler erhalten, prüfen Sie, ob die Ressource tatsächlich vorhanden ist und ob ein CORS-Problem vorliegt.

Wenn große Dateien auf 2 MB gekürzt werden, liegt das wahrscheinlich daran, dass Ihr Server „Content-Range“ nicht verfügbar macht. Das ist wahrscheinlich ein CORS-Problem.