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 liste 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 de les enregistrer 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 à l'utilisateur d'authentifier l'action d'enregistrement des fichiers à l'aide de sa 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 sur 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, du même sous-domaine et du même protocole que le domaine dans lequel le bouton est hébergé. Vous devez utiliser des protocoles correspondants 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 de la règle de même 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 à l'aide du partage de ressources entre origines multiples (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, comme data-src="//example.com/files/file.pdf", qui utilise le protocole approprié en fonction de la manière dont la page d'hébergement a été consultée.

  • 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. Toutefois, les éléments les plus couramment utilisés sont div, span ou button. Chacun de ces éléments s'affiche légèrement différemment pendant le chargement de la page, car le navigateur effectue le rendu de l'élément avant que le script JavaScript "Enregistrer dans Drive" ne le redessine.

Ce script doit être chargé via le protocole HTTPS et peut être intégré à 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 la 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, l'enregistrement à partir d'un bouton entraîne l'affichage des mêmes informations de progression sur tous les boutons similaires. Si vous cliquez sur plusieurs boutons différents, ils sont enregistrés de manière séquentielle.

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

Si le bouton "Enregistrer sur Drive" se trouve sur une page distincte de la source de données, la requête d'enregistrement du fichier doit utiliser le partage de ressources inter-origines (CORS) pour accéder à la ressource. CORS est un mécanisme qui permet à 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 comme 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 prendre en charge 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 à partir de n'importe quel domaine ou spécifier les domaines ayant accès à la ressource via le CORS, comme 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 pour savoir comment activer CORS à partir de l'origine qui diffuse le bouton "Enregistrer dans Drive". Pour en savoir plus sur l'activation du CORS sur votre serveur, consultez la section Je souhaite ajouter la compatibilité CORS à mon serveur.

API JavaScript

Le code JavaScript du bouton "Enregistrer dans Drive" définit deux fonctions de rendu de boutons dans l'espace de noms gapi.savetodrive. Si vous désactivez le rendu 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". Indiquez l'ID du conteneur (chaîne) ou l'élément DOM proprement dit.
paramètres
Objet contenant des attributs de balise "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 toutes les balises et 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 de bouton "Ajouter à Drive" à afficher. Indiquez l'ID du conteneur (chaîne) ou l'élément DOM proprement dit. Si le paramètre opt_container est omis, toutes les balises "Enregistrer dans Drive" de la page sont affichées.

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

Localiser le bouton "Enregistrer dans Drive"

Si votre page Web est compatible avec une langue spécifique, définissez la variable window.___gcfg.lang sur cette langue. Si ce paramètre n'est pas défini, la langue de 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 acceptés.

    <!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 recevez 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 les 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.