Aujourd’hui, il est possible dans un navigateur moderne d’afficher un PDF directement dans votre page Web, et ce sans librairie externe. Le langage HTML permet d’afficher du contenu n’étant pas du HTML, et ce grâce à la balise embed. En voici le code :

<embed src="https://www.codeur.com/tuto/wp-content/uploads/2022/02/pdf-test.pdf" width="800" height="500" type="application/pdf"/>

embed possède plusieurs attributs :

• src : la source, le path de votre fichier pdf (dans notre exemple, le pdf est en ligne, mais vous pouvez préciser un path local)
• width : la largeur de l’encadrement du pdf
• height : la hauteur
• type : préciser le type de fichier dans src, ici « application/pdf » pour un fichier pdf

Ce qui est pratique avec cette balise, c’est que si le navigateur de l’utilisateur ne la supporte pas, le pdf sera affiché comme suit :

Téléchargez le fichier PDF ici : <a href="https://www.codeur.com/tuto/wp-content/uploads/2022/02/pdf-test.pdf">pdf-test.pdf</a>

Vous pouvez vérifier la compatibilité de embed sur Can I use.

Si vous préférez une librairie externe, voici 2 solutions supplémentaires :

• Il existe un lecteur PDF Google, « Google PDF Viewer ». Pour ce faire, utilisez la balise embed avec comme attribut src « http://docs.google.com/gview?url= », ainsi que l’url du fichier et le paramètre « &embedded=true » (précisant que c’est une intégration HTML).
• La libraire PDF.js, permettant d’afficher votre PDF via un lecteur en Javascript.

N’hésitez pas à demander de l’aide à un freelance sur Codeur.com si vous rencontrez des difficultés !