Ajoutez le bouton "Enregistrer dans Drive".

Le bouton "Enregistrer dans Drive" permet aux utilisateurs d'enregistrer des fichiers dans Drive à partir de votre site Web. Par exemple, supposons que votre site Web répertorie plusieurs manuels d'instructions (PDF) que les utilisateurs peuvent télécharger. Le bouton "Enregistrer dans Drive" peut être placé à côté de chaque manuel pour permettre aux utilisateurs d'enregistrer les manuels dans leur dossier Mon Drive.

Lorsque l'utilisateur clique sur le bouton, le fichier est téléchargé à partir de la source de données et importé dans Google Drive à mesure que les données sont reçues. Étant donné que le téléchargement est effectué dans le contexte du navigateur de l'utilisateur, ce processus permet à celui-ci d'authentifier l'action visant à enregistrer des fichiers à l'aide d'une session de navigateur établie.

Navigateurs compatibles

Le bouton "Enregistrer dans Drive" est compatible avec ces navigateurs.

Ajouter le bouton "Enregistrer dans Drive" à une page

Pour créer une instance du bouton "Enregistrer dans Drive", ajoutez le script suivant à votre page 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>

Où :

  • class est un paramètre obligatoire, qui doit être défini sur g-savetodrive si vous utilisez une balise HTML standard.

  • data-src est un paramètre obligatoire contenant l'URL du fichier à enregistrer.

    • Les URL peuvent être absolues ou relatives.
    • L'URL data-src peut être diffusée à partir du même domaine, sous-domaine et protocole que le domaine sur lequel le bouton est hébergé. Vous devez utiliser des protocoles de correspondance entre la page et la source de données.
    • Les URI de données et les URL file:// ne sont pas acceptés.
    • En raison des mêmes règles relatives à l'origine du navigateur, cette URL doit être diffusée à partir du même domaine que la page sur laquelle elle est placée ou être accessible via le partage de ressources inter-origines (CORS). Si le bouton et la ressource se trouvent sur des domaines différents, consultez la section Gérer les boutons et les ressources sur différents domaines.(#domain).
    • Pour diffuser le fichier lorsque la même page est diffusée à la fois par HTTP et HTTPS, spécifiez la ressource sans protocole tel que data-src="//example.com/files/file.pdf", qui utilise le protocole approprié en fonction du mode d'accès à la page hôte.

  • data-filename est un paramètre obligatoire contenant le nom utilisé pour le fichier d'enregistrement.

  • data-sitename est un paramètre obligatoire contenant le nom du site Web fournissant le fichier.

Vous pouvez placer ces attributs sur n'importe quel élément HTML. Cependant, les éléments les plus couramment utilisés sont div, span ou button. Chacun de ces éléments s'affiche un peu différemment lors du chargement de la page, car le navigateur affiche l'élément avant que le code JavaScript "Enregistrer dans Drive" ne le réaffiche.

Ce script doit être chargé à l'aide du protocole HTTPS et peut être inclus à partir de n'importe quel point de la page sans restriction. Vous pouvez également charger le script de manière asynchrone pour améliorer les performances.

Utiliser plusieurs boutons sur une page

Vous pouvez placer plusieurs boutons "Enregistrer dans Drive" sur une même page. Par exemple, vous pouvez avoir un bouton en haut et en bas d'une longue page.

Si les paramètres data-src et data-filename sont identiques pour plusieurs boutons, si vous enregistrez à partir d'un seul bouton, tous les boutons similaires affichent les mêmes informations de progression. Si l'utilisateur clique sur plusieurs boutons, il est enregistré de manière séquentielle.

Gérer les boutons et les ressources sur différents domaines

Si le bouton "Enregistrer dans Drive" se trouve sur une page distincte de la source de données, la requête d'enregistrement du fichier doit utiliser le partage des ressources entre origines multiples (CORS) pour accéder à la ressource. CORS est un mécanisme permettant à une application Web d'un domaine d'accéder aux ressources d'un serveur d'un autre domaine.

Par exemple, si un bouton "Enregistrer dans Drive" est placé sur une page à l'adresse http://example.com/page.html et que la source de données est spécifiée en tant que data-src="https://otherserver.com/files/file.pdf", le bouton ne pourra pas accéder au PDF, sauf si le navigateur peut utiliser CORS pour accéder à la ressource.

L'URL data-src peut être diffusée à partir d'un autre domaine, mais les réponses du serveur HTTP doivent accepter les requêtes HTTP OPTION et inclure les en-têtes HTTP spéciaux suivants:

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

Access-Control-Allow-Origin peut avoir la valeur * pour autoriser le CORS depuis n'importe quel domaine, ou spécifier les domaines ayant accès à la ressource via CORS, par exemple http://example.com/page.html. Si vous ne disposez pas d'un serveur pour héberger votre contenu, envisagez d'utiliser Google App Engine.

Pour en savoir plus, consultez la documentation de votre serveur sur l'activation du CORS à partir de l'origine utilisant le bouton "Enregistrer dans Drive". Pour plus d'informations sur l'activation du CORS sur votre serveur, consultez la section Je souhaite ajouter la compatibilité CORS à mon serveur.

API JavaScript

Le JavaScript du bouton "Enregistrer dans Drive" définit deux fonctions d'affichage du bouton sous l'espace de noms gapi.savetodrive. Si vous désactivez l'affichage automatique, vous devez appeler l'une de ces fonctions en définissant parsetags sur explicit.

Méthode Description
gapi.savetodrive.render(
container,
parameters
)		 Affiche le conteneur spécifié sous la forme d'un widget de bouton "Enregistrer dans Drive".
Conteneur
Conteneur à afficher en tant que bouton "Enregistrer dans Drive". Spécifiez l'ID du conteneur (chaîne) ou l'élément DOM lui-même.
paramètres
Objet contenant des attributs de tag "Enregistrer dans Drive" sous forme de paires clé=valeur, sans les préfixes data-. Par exemple, {"src": "//example.com/path/to/myfile.pdf", "filename": "My Statement.pdf", "sitename": "My Company Name"}.
gapi.savetodrive.go(
opt_container
)		 Affiche l'ensemble des balises et des classes "Enregistrer dans Drive" dans le conteneur spécifié. Cette fonction ne doit être utilisée que si parsetags est défini sur explicit, ce que vous pouvez faire pour des raisons de performances.
opt_container
Conteneur contenant les tags du bouton "Enregistrer dans Drive" à afficher. Spécifiez l'ID du conteneur (chaîne) ou l'élément DOM lui-même. Si le paramètre opt_container est omis, tous les tags "Enregistrer dans Drive" de la page s'affichent.

Exemple de code JavaScript "Enregistrer dans Drive" avec chargement explicite

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

Exemple de code JavaScript "Enregistrer dans Drive" avec affichage explicite

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

Localisez le bouton "Enregistrer dans Drive"

Si votre page Web est disponible dans une langue spécifique, définissez la variable window.___gcfg.lang sur cette langue. Si cette règle n'est pas configurée, la langue Google Drive de l'utilisateur est utilisée.

Pour connaître les valeurs de code de langue disponibles, consultez la liste des codes de langue compatibles.

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

Dépannage

Si vous rencontrez une erreur XHR lors du téléchargement de votre URL data-src, vérifiez que la ressource existe réellement et que vous ne rencontrez pas de problème CORS.

Si des fichiers volumineux sont tronqués à 2 Mo, il est probable que votre serveur n'expose pas Content-Range, ce qui est probablement un problème CORS.