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, 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 au fur et à mesure de la réception des données. Étant donné que 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 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 où le bouton est hébergé. Vous devez utiliser des protocoles identiques 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 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 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 de sauvegarde.

  • 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 l'affiche de nouveau.

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 l'utilisateur clique sur plusieurs boutons différents, les modifications sont enregistrées 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 demande 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 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 à partir de n'importe quel domaine ou peut également spécifier les domaines qui ont accès à la ressource via CORS, comme http://example.com/page.html. Si vous ne disposez pas de 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 de CORS à partir de l'origine qui diffuse votre bouton "Enregistrer dans Drive". Pour savoir comment activer 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é sous la forme d'un widget de bouton "Enregistrer dans Drive".
conteneur
Conteneur à afficher sous forme de 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 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 du bouton "Enregistrer dans 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 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 obtenez une erreur XHR lorsque vous téléchargez votre URL data-src, vérifiez que la ressource existe bien et que vous n'avez 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 dû à un problème de CORS.