1. Snippets
  2. ›
  3. HTML
  4. ›
  5. Comment Intégrer PDF dans HTML

Comment Intégrer PDF dans HTML

Il existe plusieurs façons d'inclure un fichier PDF dans votre document HTML :

Façons de Mettre un Document PDF en HTML

Le moyen le plus simple de placer un document PDF dans un document HTML consiste à utiliser la balise <a> avec son attribut href. Ce que vous devez ajouter à l'élément est l'URL ou le lien de référence de votre fichier PDF. Votre code ressemblera à ceci:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <h1>Exemple PDF</h1>
    <p>Ouvrir un fichier PDF  <a href="/uploads/media/default/0001/01/540cb75550adf33f281f29132dddd14fded85bfc.pdf">exemple</a>.</p>
  </body>
</html>

Comment incorporer une visionneuse PDF en HTML

Une autre façon d’ajouter un fichier PDF à votre document HTML consiste à utiliser la balise <iframe> . Cela vous permet également de définir votre largeur et votre hauteur préférées. Pour avoir le code, suivez ces étapes simples:

  1. Définissez source pour spécifier l’URL de votre fichier PDF:
<iframe src="URL"></iframe>
  1. Définissez les attributs height et width pour définir la taille de iframe:
<iframe src="URL" height="200" width="300"></iframe>

Le code complet ressemblera à ceci:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <h1>Exemple PDF avec iframe</h1>
    <iframe src="/uploads/media/default/0001/01/540cb75550adf33f281f29132dddd14fded85bfc.pdf" width="100%" height="500px">
    </iframe>
  </body>
</html>

Si vous ne souhaitez pas que les utilisateurs téléchargent votre fichier PDF, ajoutez simplement # toolbar = 0 après l'URL de votre document PDF.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <h1>Comment désactiver téléchargement du document PDF</h1>
    <iframe src="/uploads/media/default/0001/01/540cb75550adf33f281f29132dddd14fded85bfc.pdf#toolbar=0" width="100%" height="500px">
    </iframe>
  </body>
</html>

Ressources Associées

Trouvez-vous cela utile?

Articles Associées