Il pulsante "Salva in Drive" consente agli utenti di salvare file su Drive dal tuo sito web. Ad esempio, supponiamo 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 per consentire 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 non appena i dati vengono ricevuti. Poiché il download viene eseguito nel contesto del browser dell'utente, questo processo consente all'utente di autenticare l'azione per salvare i 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 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 sug-savetodrive
se utilizzi un tag HTML standard.data-src
è un parametro obbligatorio contenente 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 dati e
file://
URL non sono supportati. - A causa dello stesso criterio di origine del browser, questo URL deve essere fornito dallo stesso dominio della pagina su cui viene posizionato o deve essere accessibile tramite la condivisione delle risorse tra origini (CORS). Se il pulsante e la risorsa si trovano in domini diversi, consulta Gestire pulsanti e risorse in 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 come
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 contenente il nome utilizzato per il file di salvataggio.data-sitename
è un parametro obbligatorio contenente 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
. Ciascuno 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 codice 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 limitazioni. Puoi anche caricare lo script in modo asincrono per migliorare le prestazioni.
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 inferiore di una lunga pagina.
Se i parametri data-src
e data-filename
sono gli stessi per più pulsanti, quando salvi da un pulsante le informazioni di avanzamento vengono visualizzate in tutti i pulsanti simili. Se fai clic su più pulsanti, questi vengono salvati in sequenza.
Gestire pulsanti e risorse in 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 in un dominio di accedere alle risorse da un server in un dominio diverso.
Ad esempio, se in una pagina all'indirizzo http://example.com/page.html
viene inserito un pulsante "Salva in Drive" e l'origine dati è specificata come data-src="https://otherserver.com/files/file.pdf"
, il pulsante non potrà 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 disponi di un server per ospitare i tuoi contenuti, potresti utilizzare Google App Engine.
Per ulteriori informazioni, consulta la documentazione del server su come abilitare CORS dall'origine che fornisce il pulsante "Salva in Drive". Per saperne di più sull'abilitazione del server per CORS, consulta Voglio aggiungere il supporto CORS al mio server.
API JavaScript
Il codice 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( |
Visualizza il contenitore specificato come widget del pulsante "Salva in Drive".
|
gapi.savetodrive.go( |
Visualizza tutti i tag e le classi "Salva in Drive" nel contenitore specificato.
Questa funzione deve essere utilizzata solo se il criterio parsetags è impostato
su explicit , cosa che potresti fare per motivi di prestazioni.
|
Esempio di codice 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 codice 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>
Localizza 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 viene impostata, viene utilizzata la lingua di Google Drive dell'utente.
Per conoscere i valori disponibili per i codici lingua, 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>
Risolvere i problemi
Se ricevi un errore XHR durante il download dell'URL data-src
, verifica che la risorsa esista effettivamente e che non sia presente un problema CORS.
Se i file di grandi dimensioni vengono troncati a 2 MB, è probabile che il tuo server non mostri l'intervallo di contenuti, probabilmente un problema CORS.