Bibliotecă JavaScript PDF Viewer cu sursă deschisă

Ce este PDFObject?

PDFObject este o bibliotecă JavaScript gratuită și open source dezvoltată pentru încorporarea documentelor PDF în pagini web. Funcționează prin generarea unui element de încorporare HTML și apoi integrându-l în structura HTML. Elementul de încorporare redă apoi documentul PDF. PDFObject nu este un randament în sine; mai degrabă se concentrează pe crearea elementului de încorporare și pe plasarea acestuia în HTML. Poate crea elemente de încorporare pentru afișarea PDF-urilor la dimensiune completă sau în secțiunile specificate ale paginii web.

Iată câteva dintre principalele caracteristici ale PDFObject:

• Mecanism de rezervă: PDFObject are un mecanism de rezervă, astfel încât, în cazurile în care un browser nu acceptă încorporarea PDF-urilor, PDFObject activează automat logica de rezervă, permițând dezvoltatorilor fie să furnizeze un link către PDF, fie orice altă logică alternativă, după cum este necesar. .
• Integrare PDF.js: PDFObject oferă integrare opțională cu PDF.js, permițând dezvoltatorilor să încorporeze PDF-uri indiferent de PDF-ul implicit al browserului privitor. Această caracteristică este utilă atunci când browserul nu acceptă încorporarea documentelor PDF în HTML.
• Parametri de deschidere PDF: PDFObject acceptă Parametri de deschidere PDF de proprietate Adobe, permițând dezvoltatorilor să specifice parametrii pentru afișarea PDF. Aceasta include opțiuni precum modul de vizualizare și alte setări specifice Adobe. Toți acești parametri pot fi găsiți aici.

GitHub Stats

Name:
Language:
Stars:
Forks:
License:
Repository was last updated at

Noțiuni introductive cu PDFObject

Putem descărca biblioteca PDFObject folosind modulul npm:

npm i pdfobject

Încorporați PDF în HTML cu verificarea suportului pentru browser

Putem încorpora un document PDF în HTML folosind biblioteca PDFObject. Inițial vom verifica dacă browserul acceptă încorporarea documentului PDF în HTML folosind metoda supportsPDFs a bibliotecii PDFObject. Dacă returnează adevărat, indicând că acceptă încorporarea PDF în HTML, atunci vom încorpora PDF-ul în HTML folosind metoda embed("document_name.pdf","#elementid"). Această funcție va încorpora PDF-ul într-un anumit element din HTML. Pentru încorporarea PDF de dimensiune completă, nu vom menționa niciun ID de element și vom apela metoda ca embed(„nume_document.pdf”). Cu toate acestea, dacă returnează false, indicând că nu acceptă încorporarea PDF în HTML, atunci vom trece la o altă logică alternativă, după cum este necesar. Verificați fragmentul de cod de mai jos pentru detalii:

Următoarea ieșire afișează documentul PDF încorporat în HTML:

Creați un mecanism de rezervă

Putem stabili un mecanism de rezervă în timp ce încorporam un PDF într-o pagină web folosind PDFObject, care este activat atunci când browserul nu acceptă încorporarea PDF în HTML. PDFObject folosește un parametru numit fallbackLink care conține o logică alternativă în timp ce apelează funcția embed. Deci, dacă un browser nu acceptă încorporarea PDF-urilor, codul prezent în fallbackLink este executat în elementul div desemnat. Verificați fragmentul de cod de mai jos pentru detalii:

Captura de ecran de ieșire afișează conținutul afișat de mecanismul de rezervă. Mecanismul de rezervă a fost activat atunci când browserul nu a acceptat încorporarea PDF-urilor în HTML.

Încorporați PDF cu parametrii Adobe PDF Open

Putem încorpora PDF-uri împreună cu câțiva parametri de deschidere folosind biblioteca PDFObject. Vom folosi metoda PDFObject.embed("myfile.pdf", "#my-container", {pdfOpenParams: { parametri }}) pentru a încorpora documentul PDF în HTML împreună cu parametrii de deschidere . Acești PDF Open Parameters includ funcții precum deschiderea PDF-ului și derularea la un anumit număr de pagină. Verificați fragmentul de cod de mai jos pentru detalii:

Următoarea captură de ecran arată documentul PDF încorporat în HTML cu parametri suplimentari care fac ca elementul de încorporare să deruleze la pagina numărul 3 după randarea acestuia:

Încorporați PDF prin integrarea PDF.js

După cum știm, PDFObject depinde de suportul browserului pentru încorporarea PDF-urilor în HTML, dar oferă o metodă alternativă de a reda PDF-uri dacă browserul nu o acceptă. Metoda alternativă este să integrați PDF.js cu PDFObject. Pentru a face acest lucru, va trebui să setăm PDF.js pe serverul nostru și apoi vom trece ForcePDFJS: true și PDFJS_URL: path/to/viewer.html/in/pdf.js în funcția de încorporare.

Notă: în exemplul de fragment de cod de mai jos, am creat și inițiat un server care conține biblioteca PDF.js, astfel încât http://localhost:8888 indică biblioteca PDF.js.

Următoarea captură de ecran arată documentul PDF redat prin integrarea PDFObject cu PDF.js:

Concluzie

În concluzie, PDFObject este o bibliotecă JavaScript ușor de utilizat pentru încorporarea documentelor PDF în HTML. Deși nu funcționează ca un randament și se bazează pe suportul browserului pentru elementele încorporate, care pot cauza probleme cum ar fi o interfață de utilizator defectă în browserele care nu acceptă elementul de încorporare, dar biblioteca are caracteristici pentru a rezolva astfel de probleme prin detectarea suportului pentru element de încorporare și mecanism de rezervă. De asemenea, putem reda PDF-uri în browsere care nu acceptă elemente încorporate prin integrarea PDF.js cu PDFObject. În ciuda limitărilor sale, PDFObject se remarcă ca un instrument valoros, pentru a încorpora și a reda documente PDF în pagini web.

Similar Products