Comment intégrer un fichier PDF dans une page web ?
Comme nous le savons tous, le format PDF est un format de fichier populaire utilisé pour partager des documents qui sont souvent destinés à être imprimés.
Il existe plusieurs façons d'afficher le contenu d'un document PDF dans une page Web.
Je vous propose dans cet article 3 méthodes permettant d'afficher des documents PDF dans n'importe quelle page Web HTML.
Introduction
Dans cet article, nous vous montrerons trois manières d’intégrer un document PDF dans une page Web en utilisant le langage HTML.
Utilisation de la balise <iframe>
La balise <iframe> peut afficher une ressource externe à une page comme si elle faisait partie de la page.
La syntaxe est simple.
<iframe src = "URL_DU_FICHIER_PDF" width = 980 height = 500></iframe>
La balise HTML <iframe> a certains attributs qui sont utilisés pour définir les aspects de la façon d'intégrer le fichier PDF. Ces attributs sont expliqués ci-dessous :
src : avec cet attribut, vous pouvez définir le chemin (l’URL) du fichier PDF externe à intégrer dans votre page Web.
type : avec cet attribut, vous pouvez définir le type de support du contenu intégré qui devrait être application / pdf pour les documents PDF. Cet attribut n'est pas nécessaire car les navigateurs Web détecteront le type de support de manière automatique lors de l'accès au serveur pour récupérer le document PDF.
width : avec cet attribut, vous pouvez spécifier la largeur du contenu à intégrer.
height : avec cet attribut, vous pouvez définir la hauteur du contenu à intégrer.
Exemple
Utilisation de la balise <object>
Une autre possibilité permettant d’intégrer des documents PDF dans une page Web consiste à utiliser la balise <object>. Les attributs de la balise object sont similaires à ceux utilisés avec la balise <iframe>. Mais au lieu de src on a l’attribut data qui permet de spécifier le chemin du fichier pdf à intégrer.
<object width = "980" height = "500" type = "application/pdf" data = " URL_FICHIER_PDF”></object>
Utilisation de la balise <embed>
L'utilisation de la balise <embed> est également similaire à l'utilisation de la balise <object> avec la balise <object>.
<embed src = " URL_FICHIER_PDF" type = "application/pdf" width = 920 height = 500 /> </embed>
Configuration de la vue de document PDF
Nous pouvons également contrôler l'affichage des documents PDF sur la page Web. Il existe un certain nombre de paramètres disponibles qui aident à afficher les documents PDF.
Les paramètres suivants sont couramment utilisés pour intégrer un fichier PDF dans une page HTML à l’aide la balise <embed>
- page = numéro de page - Spécifie un nombre (entier) de la page à afficher par défaut. La première page du document a une valeur numéro de page
- Zoom : Définit les valeurs de zoom et de défilement. Par exemple, une valeur d'échelle de 100 indique une valeur de zoom de 100%. 150 indique que l’affichage sera de 150% etc
- scrollbar = 1 | 0 - Active ou désactive les barres de défilement.
- toolbar = 1 | 0 - Active ou désactive la barre d'outils.
- statusbar = 1 | 0 - Active ou désactive la barre d'état.
- navpanes = 1 | 0 - Active ou désactive les volets de navigation et les onglets.
Exemple
N’hésitez pas à tester toutes les possibilités
Conclusion
L'utilisation des balises <embed> et <object> est une solution obsolète qui n'est plus recommandée. Ces balises ont été utilisées dans les premières années du HTML.
Nous vous recommandons donc d'utiliser la balise <iframe> pour intégrer des documents PDF dans votre site Web et qui reste une méthode simple à mettre en place.
J'espère avoir dissipé tous les doutes sur la manière d'intégrer des documents PDF dans la page HTML à l'aide de la balise HTML <iframe>.
Si vous avez des questions ou si vous rencontrez des problèmes à ce sujet, veuillez me le faire savoir dans les commentaires.
Si vous avez aimé cet article, aidez-nous à le partager et n’hésitez pas à laisser votre commentaire.
Maitriser HTML et CSS: du débutant à Expert
Si vous souhaitez apprendre le HTML et le CSS, plongez dans l'univers captivant de la conception web avec le livre (ebook) "Maitriser HTML et CSS : du Débutant à Expert" publié sur Amazon. Vous trouverez dans ce livre tout ce que vous avez besoin pour développer vos compétences en HTML et CSS. Ce livre sera votre référence en HTML et CSS. C'est votre ticket pour un voyage extraordinaire où vous découvrirez les fondations du web, devenant ainsi le maître de votre propre espace en ligne. Cliquez sur l'image ci-dessous pour y accéder directement.
