Bibliothèque de visualisation PDF JavaScript Open Source
Bibliothèque JavaScript gratuite et open source pour afficher des documents PDF.
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. Il fonctionne en générant un élément HTML intégré, 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 lui-même ; il se concentre plutôt sur la création de l'élément intégré et son placement dans le code HTML. Il peut créer des éléments intégrés pour afficher les 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 PDF quel que soit le PDF par défaut du navigateur. téléspectateur. Cette fonctionnalité est utile lorsque le navigateur ne prend pas en charge l'intégration de documents PDF dans le HTML.
- Paramètres d'ouverture PDF : PDFObject prend en charge les Paramètres d'ouverture PDF propriétaires d'Adobe, permettant aux développeurs de spécifier les paramètres d'affichage des PDF. Cela inclut 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.
Premiers pas avec PDFObject
Nous pouvons télécharger la bibliothèque PDFObject en utilisant le module npm :
Installer à l'aide de NPM
npm i pdfobject
Incorporer un PDF dans HTML avec la vérification de la prise en charge du navigateur
Nous pouvons intégrer un document PDF en HTML à l'aide de la bibliothèque PDFObject. Dans un premier temps, nous vérifierons si le navigateur prend en charge l'intégration du document PDF en HTML à l'aide de la méthode supportsPDFs de la bibliothèque PDFObject. S'il renvoie vrai, indiquant qu'il prend en charge l'intégration de PDF dans HTML, nous intégrerons le PDF dans le HTML à l'aide de 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 d'un PDF en taille réelle, nous ne mentionnerons aucun identifiant d'élément et appellerons la méthode comme embed("document_name.pdf"). Cependant, s'il renvoie false, indiquant qu'il ne prend pas en charge l'intégration de 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 incorporé dans le code HTML :
Créer un mécanisme de repli
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 fichiers PDF, le code présent dans le 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 était activé lorsque le navigateur ne prenait pas en charge l’intégration de PDF en HTML.
Incorporer 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: { settings }}) pour intégrer le document PDF dans le HTML avec les paramètres d'ouverture. . Ces Paramètres d'ouverture du 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 incorporé 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 l'avoir rendu :
Incorporez des 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 en HTML, mais il fournit une méthode alternative pour restituer les PDF si le navigateur ne le prend pas en charge. La méthode alternative consiste à intégrer PDF.js avec PDFObject. Pour ce faire, nous devrons configurer PDF.js sur notre serveur puis nous passerons ForcePDFJS : true et PDFJS_URL : path/to/viewer.html/in/pdf.js à la fonction embed.
Remarque : Dans l'exemple d'extrait de code ci-dessous, nous avons créé et lancé un serveur contenant la bibliothèque PDF.js afin que 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 à PDF.js :
Conclusion
En conclusion, PDFObject est une bibliothèque JavaScript facile à utiliser pour intégrer des documents PDF en HTML. Bien qu'il ne fonctionne pas comme un moteur de rendu et qu'il repose sur la prise en charge par le navigateur des éléments intégrés, ce qui peut entraîner des problèmes tels qu'une interface utilisateur cassée dans les navigateurs qui ne prennent pas en charge les éléments intégrés, la bibliothèque dispose de fonctionnalités permettant de résoudre ces problèmes grâce à sa détection de prise en charge pour élément intégré et mécanisme de secours. Nous pouvons également restituer les PDF dans les navigateurs qui ne prennent pas en charge les éléments intégrés en intégrant PDF.js avec PDFObject. Malgré ses limites, PDFObject se distingue comme un outil précieux pour intégrer et restituer des documents PDF dans des pages Web.
