Bibliothèque de visionneuse PDF JavaScript Open Source

Qu'est-ce que PDFObject ?

PDFObject est une bibliothèque JavaScript gratuite et open source développée pour intégrer des documents PDF dans des pages Web. Elle fonctionne en générant un élément d'intégration HTML, puis en l'intégrant dans la structure HTML. L'élément d'intégration restitue ensuite le document PDF. PDFObject n'est pas un moteur de rendu en soi ; il se concentre plutôt sur la création de l'élément d'intégration et son placement dans le code HTML. Il peut créer des éléments d'intégration pour afficher des PDF en taille réelle ou dans des sections spécifiées de la page Web.

Voici quelques-unes des principales fonctionnalités de PDFObject :

• Mécanisme de secours : PDFObject dispose d'un mécanisme de secours. Ainsi, dans les cas où un navigateur ne prend pas en charge l'intégration de fichiers PDF, PDFObject active automatiquement la logique de secours permettant aux développeurs de fournir un lien vers le PDF ou toute autre logique alternative selon les besoins.
• Intégration PDF.js : PDFObject fournit une intégration facultative avec PDF.js, permettant aux développeurs d'intégrer des fichiers PDF quel que soit le visualiseur PDF par défaut du navigateur. Cette fonctionnalité est utile lorsque le navigateur ne prend pas en charge l'intégration de documents PDF dans le code HTML.
• Paramètres d'ouverture PDF : PDFObject prend en charge les Paramètres d'ouverture PDF propriétaires d'Adobe, qui permettent aux développeurs de spécifier des paramètres pour l'affichage PDF. Cela comprend des options telles que le mode d'affichage et d'autres paramètres spécifiques à Adobe. Tous ces paramètres peuvent être trouvés ici.

Statistiques GitHub

Nom:
Langue:
Étoiles:
Fourchettes:
Licence:
Le référentiel a été mis à jour pour la dernière fois à

Premiers pas avec PDFObject

Nous pouvons télécharger la bibliothèque PDFObject en utilisant le module npm :

npm i pdfobject

Intégrer un PDF dans un HTML avec vérification de la prise en charge du navigateur

Nous pouvons intégrer un document PDF dans HTML en utilisant la bibliothèque PDFObject. Dans un premier temps, nous allons vérifier si le navigateur prend en charge l'intégration du document PDF dans HTML en utilisant la méthode supportsPDFs de la bibliothèque PDFObject. Si elle renvoie true indiquant qu'elle prend en charge l'intégration PDF dans HTML, nous intégrerons le PDF dans le HTML en utilisant la méthode embed("document_name.pdf","#elementid"). Cette fonction intégrera le PDF dans un élément spécifique du HTML. Pour l'intégration PDF en taille réelle, nous ne mentionnerons aucun identifiant d'élément et appellerons la méthode comme embed("document_name.pdf"). Cependant, si elle renvoie false indiquant qu'elle ne prend pas en charge l'intégration PDF dans HTML, nous passerons à une autre logique alternative si nécessaire. Consultez l'extrait de code ci-dessous pour plus de détails :

Sortir

La sortie suivante affiche le document PDF intégré dans le HTML :

Créer un mécanisme de secours

Nous pouvons établir un mécanisme de secours lors de l'intégration d'un PDF dans une page Web à l'aide de PDFObject qui est activé lorsque le navigateur ne prend pas en charge l'intégration de PDF dans HTML. PDFObject utilise un paramètre appelé fallbackLink qui contient une logique alternative lors de l'appel de la fonction embed. Ainsi, si un navigateur ne prend pas en charge l'intégration de PDF, le code présent dans fallbackLink est exécuté dans l'élément div désigné. Consultez l'extrait de code ci-dessous pour plus de détails :

Sortir

La capture d'écran de sortie affiche le contenu affiché par le mécanisme de secours. Le mécanisme de secours a été activé lorsque le navigateur ne prenait pas en charge l'intégration de fichiers PDF dans HTML.

Intégrer un PDF avec les paramètres d'ouverture PDF d'Adobe

Nous pouvons intégrer des PDF avec certains paramètres d'ouverture à l'aide de la bibliothèque PDFObject. Nous utiliserons la méthode PDFObject.embed("myfile.pdf", "#my-container", {pdfOpenParams: { parameters }}) pour intégrer le document PDF dans le HTML avec les paramètres d'ouverture. Ces Paramètres d'ouverture PDF incluent des fonctionnalités telles que l'ouverture du PDF et le défilement jusqu'à un numéro de page spécifique. Consultez l'extrait de code ci-dessous pour plus de détails :

Sortir

La capture d'écran suivante montre le document PDF intégré dans le HTML avec des paramètres supplémentaires qui font défiler l'élément d'intégration jusqu'à la page numéro 3 après son rendu :

Intégrer un PDF en intégrant PDF.js

Comme nous le savons, PDFObject dépend de la prise en charge du navigateur pour intégrer des PDF dans HTML, mais il fournit une méthode alternative pour restituer des PDF si le navigateur ne le prend pas en charge. La méthode alternative consiste à intégrer PDF.js à PDFObject. Pour ce faire, nous devrons configurer PDF.js sur notre serveur, puis nous passerons les paramètres ForcePDFJS: true et PDFJS_URL: path/to/viewer.html/in/pdf.js à la fonction embed.

Remarque : dans l'extrait de code d'exemple ci-dessous, nous avons créé et initialisé un serveur contenant la bibliothèque PDF.js, donc http://localhost:8888 pointe vers la bibliothèque PDF.js.

Sortir

La capture d'écran suivante montre le document PDF rendu en intégrant PDFObject avec PDF.js :

Conclusion

En conclusion, PDFObject est une bibliothèque JavaScript facile à utiliser pour intégrer des documents PDF dans du HTML. Bien qu'elle ne fonctionne pas comme un moteur de rendu et qu'elle s'appuie sur la prise en charge des éléments d'intégration par le navigateur, ce qui peut entraîner des problèmes tels qu'une interface utilisateur défectueuse dans les navigateurs qui ne prennent pas en charge les éléments d'intégration, la bibliothèque dispose de fonctionnalités permettant de résoudre ces problèmes grâce à sa détection de prise en charge des éléments d'intégration et à son mécanisme de secours. Nous pouvons également restituer des PDF dans des navigateurs qui ne prennent pas en charge les éléments d'intégration en intégrant PDF.js à PDFObject. Malgré ses limites, PDFObject se distingue comme un outil précieux pour intégrer et restituer des documents PDF dans des pages Web.

Produits Similaires