Intégrer un PDF dans HTML
-
Utilisez la balise
embed
pour intégrer un PDF en HTML -
Utilisez la balise
iframe
pour intégrer le PDF dans le HTML -
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>
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn