Biblioteca de visualització de PDF de codi obert JavaScript
Biblioteca JavaScript gratuïta i de codi obert per veure documents PDF.
Què és PDFObject?
PDFObject és una biblioteca de JavaScript gratuïta i de codi obert desenvolupada per incrustar documents PDF a pàgines web. Funciona generant un element incrustat HTML i després integrant-lo a l'estructura HTML. L'element incrustat mostra el document PDF. PDFObject no és un renderitzador en si; més aviat es centra a crear l'element incrustat i col·locar-lo dins de l'HTML. Pot crear elements incrustats per mostrar PDF a mida completa o dins de seccions especificades de la pàgina web.
A continuació es mostren algunes de les característiques principals de PDFObject:
- Mecanisme de reserva: PDFObject té un mecanisme de reserva, de manera que, en els casos en què un navegador no admet la inserció de PDF, PDFObject activa automàticament la lògica de reserva que permet als desenvolupadors proporcionar un enllaç al PDF o qualsevol altra lògica alternativa segons sigui necessari. .
- Integració de PDF.js: PDFObject proporciona una integració opcional amb PDF.js, la qual cosa permet als desenvolupadors incrustar PDF independentment del PDF predeterminat del navegador. espectador. Aquesta funció és útil quan el navegador no admet incrustar documents PDF a l'HTML.
- Paràmetres oberts de PDF: PDFObject admet els paràmetres oberts de PDF patentats d'Adobe que permeten als desenvolupadors especificar paràmetres per a la visualització de PDF. Això inclou opcions com el mode de visualització i altres configuracions específiques d'Adobe. Tots aquests paràmetres es poden trobar aquí.
Introducció a PDFObject
Podem descarregar la biblioteca PDFObject mitjançant el mòdul npm:
Instal·lar mitjançant NPM
npm i pdfobject
Insereix PDF en HTML amb la verificació de compatibilitat amb el navegador
Podem incrustar un document PDF en HTML mitjançant la biblioteca PDFObject. Inicialment comprovarem si el navegador admet incrustar el document PDF en HTML mitjançant el mètode supportsPDFs de la biblioteca PDFObject. Si retorna cert que indica que admet la incrustació de PDF a HTML, incrustarem el PDF a l'HTML mitjançant el mètode embed("document_name.pdf","#elementid"). Aquesta funció incrustarà el PDF en un element específic de l'HTML. Per incrustar PDF a mida completa no esmentarem cap identificador d'element i cridarem el mètode com a embed("nom_document.pdf"). Tanmateix, si torna fals indicant que no admet la incrustació de PDF a HTML, passarem a una altra lògica alternativa segons sigui necessari. Comproveu el fragment de codi següent per obtenir els detalls:
Sortida
La sortida següent mostra el document PDF incrustat a l'HTML:
Crear un mecanisme de reserva
Podem establir un mecanisme de reserva mentre incrustem un PDF en una pàgina web mitjançant PDFObject, que s'activa quan el navegador no admet la inserció de PDF en HTML. PDFObject utilitza un paràmetre anomenat fallbackLink que conté una lògica alternativa mentre crida a la funció embed. Per tant, si un navegador no admet la inserció de PDF, el codi present a fallbackLink s'executa a l'element div designat. Comproveu el fragment de codi següent per obtenir els detalls:
Sortida
La captura de pantalla de sortida mostra el contingut que mostra el mecanisme de reserva. El mecanisme de reserva es va activar quan el navegador no admetia la inserció de PDF en HTML.
Insereix PDF amb els paràmetres oberts de PDF d'Adobe
Podem incrustar PDF juntament amb alguns paràmetres d'obertura mitjançant la biblioteca PDFObject. Utilitzarem el mètode PDFObject.embed("myfile.pdf", "#my-container", {pdfOpenParams: {parameters }}) per incrustar el document PDF a l'HTML juntament amb els paràmetres d'obertura . Aquests PDF Open Parameters inclouen funcions com ara obrir el PDF i desplaçar-se a un número de pàgina específic. Comproveu el fragment de codi següent per obtenir els detalls:
Sortida
La captura de pantalla següent mostra el document PDF incrustat a l'HTML amb paràmetres addicionals que fan que l'element incrustat es desplaci fins a la pàgina número 3 després de representar-lo:
Insereix PDF integrant PDF.js
Com sabem, PDFObject depèn del suport del navegador per incrustar PDF a HTML, però proporciona un mètode alternatiu per representar PDF si el navegador no ho admet. El mètode alternatiu és integrar PDF.js amb PDFObject. Per fer-ho, haurem de configurar PDF.js al nostre servidor i després passarem ForcePDFJS: true i PDFJS_URL: path/to/viewer.html/in/pdf paràmetres .js a la funció embed.
Nota: al fragment de codi d'exemple següent, hem creat i iniciat un servidor que conté la biblioteca PDF.js, de manera que http://localhost:8888 apunta a la biblioteca PDF.js.
Sortida
La captura de pantalla següent mostra el document PDF renderitzat mitjançant la integració de PDFObject amb PDF.js:
Conclusió
En conclusió, PDFObject és una biblioteca de JavaScript fàcil d'utilitzar per incrustar documents PDF en HTML. Tot i que no funciona com a renderitzador i es basa en el suport del navegador per incrustar elements que poden causar problemes com ara una interfície d'usuari trencada en navegadors que no admeten l'element incrustat, però la biblioteca té funcions per resoldre aquests problemes mitjançant la seva detecció de suport per a element incrustat i mecanisme de reserva. També podem representar PDF en navegadors que no admeten elements incrustats integrant PDF.js amb PDFObject. Malgrat les seves limitacions, PDFObject destaca com una valuosa eina, per incrustar i renderitzar documents PDF en pàgines web.
