Aggiungi il pulsante "Salva in Drive"

Il pulsante "Salva in Drive" consente agli utenti di salvare i file su Drive dal tuo sito web. Supponiamo, ad esempio, che il tuo sito web elenchi diversi manuali di istruzioni (PDF) che gli utenti possono scaricare. Il pulsante "Salva in Drive" può essere posizionato accanto a ogni manuale, consentendo agli utenti di salvare i manuali in Il mio Drive.

Quando l'utente fa clic sul pulsante, il file viene scaricato dall'origine dati e caricato su Google Drive man mano che i dati vengono ricevuti. Poiché il download viene eseguito nel contesto del browser dell'utente, questo processo consente all'utente di autenticare l'azione di salvataggio dei file utilizzando la sessione del browser stabilita.

Browser supportati

Il pulsante "Salva in Drive" supporta questi browser.

Aggiungere il pulsante "Salva in Drive" a una pagina

Per creare un'istanza del pulsante "Salva in Drive", aggiungi il seguente script alla tua pagina web:

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

Dove:

• class è un parametro obbligatorio che deve essere impostato su g-savetodrive se utilizzi un tag HTML standard.

• data-src è un parametro obbligatorio che contiene l'URL del file da salvare.

  • Gli URL possono essere assoluti o relativi.
  • L'URL data-src può essere pubblicato dallo stesso dominio, sottodominio e protocollo del dominio in cui è ospitato il pulsante. Devi utilizzare protocolli corrispondenti tra la pagina e l'origine dati.
  • Gli URI di dati e gli URL file:// non sono supportati.
  • A causa della policy relativa alla stessa origine del browser, questo URL deve essere pubblicato dallo stesso dominio della pagina in cui è inserito o essere accessibile utilizzando la condivisione delle risorse tra origini (CORS). Se il pulsante e la risorsa si trovano su domini diversi, consulta Gestire pulsanti e risorse su domini diversi.(#domain).
  • Per pubblicare il file quando la stessa pagina viene pubblicata sia da HTTP che da HTTPS, specifica la risorsa senza un protocollo, ad esempio data-src="//example.com/files/file.pdf", che utilizza il protocollo appropriato in base alla modalità di accesso alla pagina di hosting.

• data-filename è un parametro obbligatorio che contiene il nome utilizzato per il file di salvataggio.

• data-sitename è un parametro obbligatorio che contiene il nome del sito web che fornisce il file.

Puoi inserire questi attributi in qualsiasi elemento HTML. Tuttavia, gli elementi più comunemente utilizzati sono div, span o button. Ognuno di questi elementi viene visualizzato in modo leggermente diverso durante il caricamento della pagina perché il browser esegue il rendering dell'elemento prima che il JavaScript "Salva in Drive" esegua nuovamente il rendering dell'elemento.

Questo script deve essere caricato utilizzando il protocollo HTTPS e può essere incluso da qualsiasi punto della pagina senza restrizioni. Puoi anche caricare lo script in modo asincrono per migliorare le prestazioni.

Nota: il pulsante viene sottoposto a rendering in linea. Il pulsante "Salva in Drive" può essere racchiuso in un altro elemento per fare in modo che il layout iniziale sia simile al layout finale.

Nota: se l'utente esce dalla pagina prima che il download sia completato, i dati vengono eliminati e non viene creato alcun file in Google Drive.

Utilizzare più pulsanti in una pagina

Puoi inserire più pulsanti "Salva in Drive" nella stessa pagina. Ad esempio, potresti avere un pulsante nella parte superiore e uno nella parte inferiore di una pagina lunga.

Se i parametri data-src e data-filename sono gli stessi per più pulsanti, il salvataggio da un pulsante fa sì che tutti i pulsanti simili visualizzino le stesse informazioni sullo stato di avanzamento. Se si fa clic su più pulsanti diversi, i file vengono salvati in sequenza.

Gestire pulsanti e risorse su domini diversi

Se il pulsante "Salva in Drive" si trova in una pagina separata dall'origine dati, la richiesta di salvataggio del file deve utilizzare la condivisione delle risorse tra origini (CORS) per accedere alla risorsa. CORS è un meccanismo che consente a un'applicazione web su un dominio di accedere alle risorse di un server su un dominio diverso.

Ad esempio, se un pulsante "Salva in Drive" viene inserito in una pagina all'indirizzo http://example.com/page.html, e l'origine dati viene specificata come data-src="https://otherserver.com/files/file.pdf", il pulsante non riuscirà ad accedere al PDF a meno che il browser non possa utilizzare CORS per accedere alla risorsa.

L'URL data-src può essere pubblicato da un altro dominio, ma le risposte del server HTTP devono supportare le richieste HTTP OPTION e includere le seguenti intestazioni HTTP speciali:

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

Access-Control-Allow-Origin può avere il valore * per consentire CORS da qualsiasi dominio o, in alternativa, può specificare i domini che hanno accesso alla risorsa tramite CORS, ad esempio http://example.com/page.html. Se non hai un server per ospitare i tuoi contenuti, valuta la possibilità di utilizzare Google App Engine.

Per ulteriori informazioni, consulta la documentazione del server su come attivare CORS dall'origine che pubblica il pulsante "Salva in Drive". Per ulteriori informazioni sull' attivazione di CORS sul server, consulta Voglio aggiungere il supporto CORS al mio server.

API JavaScript

Il JavaScript del pulsante "Salva in Drive" definisce due funzioni di rendering dei pulsanti nello spazio dei nomi gapi.savetodrive. Se disattivi il rendering automatico, devi chiamare una di queste funzioni impostando parsetags su explicit.

Metodo	Descrizione
gapi.savetodrive.render( container, parameters )	Esegue il rendering del container specificato come widget del pulsante "Salva in Drive". container Il container di cui eseguire il rendering come pulsante "Salva in Drive". Specifica l'ID del container (stringa) o l'elemento DOM stesso. parameters Un oggetto contenente gli attributi del tag "Salva in Drive" come coppie chiave-valore, senza i prefissi data-. Ad esempio, {"src": "//example.com/path/to/myfile.pdf", "filename": "My Statement.pdf", "sitename": "My Company Name"}.
gapi.savetodrive.go( opt_container )	Esegue il rendering di tutti i tag e le classi "Salva in Drive" nel container specificato. Questa funzione deve essere utilizzata solo se parsetags è impostato a explicit, cosa che potresti fare per motivi di prestazioni. opt_container Il container contenente i tag del pulsante "Salva in Drive" di cui eseguire il rendering. Specifica l'ID del container (stringa) o l'elemento DOM stesso. Se il parametro opt_container viene omesso, viene eseguito il rendering di tutti i tag "Salva in Drive" nella pagina.

Esempio di JavaScript "Salva in Drive" con caricamento esplicito

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

Esempio di JavaScript "Salva in Drive" con rendering esplicito

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

Localizzare il pulsante "Salva in Drive"

Se la tua pagina web supporta una lingua specifica, imposta la variabile window.___gcfg.lang su quella lingua. Se non è impostata, viene utilizzata la lingua di Google Drive dell'utente.

Per i valori dei codici lingua disponibili, consulta l' elenco dei codici lingua supportati.

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

Risoluzione dei problemi

Se ricevi un errore XHR durante il download dell'URL data-src, verifica che la risorsa esista effettivamente e che non si tratti di un problema di CORS.

Se i file di grandi dimensioni vengono troncati a 2 MB, è probabile che il server non esponga Content-Range, probabilmente a causa di un problema di CORS.