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. Supposons, par exemple, 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, ce qui permet 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. Comme le téléchargement est effectué dans le contexte du navigateur de l'utilisateur, ce processus lui permet 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 les navigateurs suivants.

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 où 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 compatibles.
    • 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 des ressources inter-origines (CORS). Si le bouton et la ressource se trouvent sur des domaines différents, consultez 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, par exemple data-src="//example.com/files/file.pdf", qui utilise le protocole approprié en fonction de la façon 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 qui fournit 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 affiche l'élément avant que le 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 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 pour 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 votre 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 inter-origines (CORS) pour accéder à la ressource. Le 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 le 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 être compatibles avec 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 qui ont 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 sur l'activation du CORS à partir de l'origine qui diffuse votre bouton "Enregistrer dans Drive". Pour en savoir plus sur l'activation du CORS sur votre serveur, consultez Je souhaite ajouter la compatibilité CORS à mon serveur.

API JavaScript

Le JavaScript du bouton "Enregistrer dans Drive" définit deux fonctions de rendu de bouton sous 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é en tant que 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 les attributs de balise "Enregistrer dans Drive" sous forme de paires clé=valeur, sans les data- préfixes. 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 balises de bouton "Enregistrer dans Drive" à afficher. Indiquez l'ID du conteneur (chaîne) ou l'élément DOM proprement dit. Si le opt_container paramètre est omis, toutes les balises "Enregistrer dans Drive" de la page sont affichées.

Exemple de 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 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 elle n'est pas définie, 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 recevez une erreur XHR lors du téléchargement de votre data-src URL, vérifiez que la ressource existe réellement et que vous n'avez pas de problème de CORS.

CORS