Bibliothèque de visualisation PDF JavaScript Open Source
Essayez cette API JavaScript gratuite et open source en tant que bibliothèque d'analyseur, de visionneuse, de lecture et de rendu PDF.
Qu’est-ce que PDF.js ?
PDF.js est une bibliothèque de visualisation PDF open source basée sur JavaScript et HTML5 développée par Mozilla qui permet de visualiser des documents PDF (Portable Document Format) dans le navigateur.
PDF.js prend en charge plusieurs fonctionnalités répertoriées ci-dessous :
- Rendre des PDF : vous pouvez ouvrir et afficher, lire ou restituer des documents PDF dans les navigateurs Web.
- Imprimer/Enregistrer des PDF : PDF.js permet également d'imprimer ou d'enregistrer des documents PDF à partir de votre navigateur Web préféré.
- Mode Présentation : en utilisant le mode Présentation, vous pouvez afficher les pages PDF en plein écran et accéder à chaque page comme une diapositive de présentation.
- Navigation PDF : PDF.js fournit des commandes de navigation plus simples à l'aide desquelles vous pouvez passer aux pages suivantes ou précédentes. Vous pouvez également accéder rapidement à la page souhaitée en entrant le numéro de la page.
- Annotation PDF : vous pouvez également annoter des documents PDF en ajoutant du texte, des images ou en dessinant sur les pages PDF.
- Rotation des pages PDF : à l'aide de PDF.js, vous pouvez également faire pivoter les pages PDF dans le sens des aiguilles d'une montre ou dans le sens inverse.
- Défilement du PDF : PDF.js offre des contrôles intéressants pour faire défiler les pages horizontalement ou verticalement, etc.
- Propriétés du document PDF : Dernier point mais non le moindre, vous pouvez également afficher les propriétés des documents PDF dans le navigateur à l'aide de la visionneuse PDF.js.
Premiers pas avec PDF.js
Il existe trois façons d'obtenir PDF.js et de commencer à l'utiliser dans vos projets Web.
1. Construire à partir des sources
Vous pouvez cloner le référentiel PDF.js depuis GitHub et le créer vous-même après avoir installé Node.js, gulp et dépendances PDF.js en suivant les étapes ci-dessous :
Clonez le référentiel git PDF.js sur la machine locale et passez au dossier pdf.js
git clone https://github.com/mozilla/pdf.js.git
cd pdf.js
Installer Node.js
https://nodejs.org/en/download
Installer le package gulp globalement
npm install -g gulp-cli
Installer les dépendances PDF.js
npm install
Exécutez le serveur gulp et ouvrez la visionneuse dans le navigateur à l'adresse http://localhost:8888/web/viewer.html
gulp server
2. Utilisez une distribution prédéfinie
PDF.js propose également des distributions prédéfinies ainsi que le code source que vous pouvez trouver sur les versions PDF.js sur GitHub. . Vous pouvez télécharger la bibliothèque PDF.js prédéfinie et commencer à l'utiliser.
3. Utilisez la bibliothèque hébergée via CDN
PDF.js est également hébergé sur des serveurs CDN gratuits. Quelques liens sont partagés ci-dessous :
- https://cdnjs.com/libraries/pdf.js
- https://www.jsdelivr.com/package/npm/pdfjs-dist
- https://unpkg.com/pdfjs-dist
Exécutez la visionneuse PDF.js
Après avoir téléchargé et extrait une bibliothèque de distribution prédéfinie depuis GitHub, vous trouvez deux dossiers : build et web. Les fichiers de bibliothèque PDF.js se trouvent dans le dossier build où le dossier web contient un projet de visualisation qui comprend viewer.html, viewer.css, viewer.js et les fichiers associés. Si vous vérifiez le code viewer.html, vous pouvez voir qu'il fait référence à la bibliothèque pdf.js du dossier de construction et à d'autres fichiers CSS et js associés.
Exécutons viewer.html dans le navigateur pour voir à quoi ressemble la visionneuse PDF.js :
Rendre/Afficher des documents PDF
Pour simplement afficher ou afficher un document PDF dans le navigateur à l'aide de la bibliothèque de visualisation PDF.js, nous devons inclure la bibliothèque PDF.js dans l'en-tête de notre document HTML à l'aide de la balise script, ajouter un canvas au corps HTML, puis ajoutez le code JavaScript nécessaire pour utiliser pdfjsLib et promettez aux objets de gérer le chargement et le rendu asynchrones du document PDF.
Le code ci-dessus charge simplement un document PDF dans le navigateur sans aucune interface utilisateur ni contrôle comme ci-dessous :
Démo en ligne
Essayez cette en ligne Démo de PDF.js Viewer pour explorer toutes les fonctionnalités de la bibliothèque PDF.js.
Conclusion
PDF.js est une bibliothèque de visualisation PDF JavaScrpit gratuite et open source avec une communauté forte. Il fournit une prise en charge multi-navigateurs pour les navigateurs modernes et existants. Oui, l'expérience utilisateur sur les navigateurs existants n'est peut-être pas la même que sur les navigateurs modernes, mais elle reste bonne en tant que bibliothèque gratuite. C’est sécurisé et personnalisable. Les fonctionnalités sont limitées mais en tant que visionneuse PDF, cela fonctionne très bien.
PDF.js fournit des API et une architecture intéressantes pour créer une visionneuse PDF basée sur le Web. Comme il faut du temps pour ajouter plus de contrôles d'interface utilisateur à la visionneuse afin de faire gagner du temps aux développeurs, PDF.js fournit également le code source d'un visualiseur PDF entièrement fonctionnel et riche en fonctionnalités que vous pouvez trouver (consultez viewer.html, viewer.js et viewer.css etc.) dans le dossier web du package de distribution de la bibliothèque PDF.js.