Intégrer un PDF dans HTML

1. Utilisez la balise embed pour intégrer un PDF en HTML
2. Utilisez la balise iframe pour intégrer le PDF dans le HTML
3. Utilisez la balise object pour intégrer un PDF dans HTML

Dans ce didacticiel, nous allons présenter des méthodes pour intégrer un PDF dans HTML.

Utilisez la balise embed pour intégrer un PDF en HTML

HTML propose une balise embed pour intégrer des ressources externes dans la page Web. Nous pouvons intégrer des ressources externes comme des PDF, des lecteurs multimédias, des pages Web, etc., en utilisant la balise embed. La balise a l’attribut src où l’on peut donner le chemin du fichier à intégrer. On peut spécifier le type du fichier embarqué avec l’attribut type. Pour PDF, l’attribut type doit être application/pdf. La balise embed est une balise à fermeture automatique.

Par exemple, créez un fichier nommé files dans le répertoire où se trouve le fichier HTML. À l’intérieur du fichier files, se trouve un PDF husky.pdf. En HTML, écrivez la balise embed et indiquez le chemin files/husky.pdf dans l’attribut src. Définissez ensuite l’attribut type sur application/pdf. Donnez la largeur et la hauteur du PDF de 100%.

L’exemple ci-dessous générera le PDF husky.pdf sur la page Web. Le PDF couvrira la fenêtre car la hauteur et la largeur sont définies sur 100%.

La balise embed peut ne pas être prise en charge dans tous les navigateurs modernes. Le navigateur Android Chrome ne prend pas en charge l’intégration de PDF. Dans de tels cas, nous pouvons utiliser la visionneuse PDF de Google Drive. Nous devons supprimer l’attribut type et définir l’URL Google Drive du PDF. De cette façon, nous pouvons intégrer le PDF dans le HTML.

Exemple de code :

<embed src="files/husky.pdf" type="application/pdf" width="100%" height="100%" />

Utilisez la balise iframe pour intégrer le PDF dans le HTML

La balise HTML iframe permet d’intégrer d’autres documents dans le fichier HTML. Nous pouvons l’utiliser pour intégrer des PDF en HTML. On peut préciser le chemin du fichier PDF dans l’attribut src. Nous pouvons définir la hauteur et la largeur du PDF dans la balise.

Par exemple, écrivez la balise iframe et définissez l’attribut src sur files/husky.jpg. Husky.jpg est le fichier PDF à intégrer qui se trouve dans le répertoire files. Le fichier HTML et le répertoire files se trouvent dans le même répertoire. Réglez la hauteur et la largeur du PDF sur 100%. Le PDF couvrira la fenêtre. L’utilisation de la balise iframe donne une barre de défilement verticale au PDF. De cette façon, nous pouvons intégrer un fichier PDF en HTML à l’aide de la balise iframe.

Exemple de code :

<iframe src="files/husky.pdf" height="100%" width="100%"></iframe>

Utilisez la balise object pour intégrer un PDF dans HTML

On peut aussi utiliser la balise object pour intégrer un PDF en HTML. La balise object définira un conteneur qu’une ressource externe utilisera. Les ressources externes peuvent être des PDF, des médias, des pages web, etc. On peut définir le chemin du fichier dans l’attribut data. De même, comme les méthodes ci-dessus, nous pouvons définir la hauteur et la largeur du conteneur à partir de la balise elle-même. Ainsi, nous pouvons intégrer le PDF dans le HTML à l’aide de la balise object.

Exemple de code :

<object data="files/husky.pdf" height="100%" width="100%"></object>