Open Source JavaScript PDF Viewer-bibliotek

Hvad er PDFObject?

PDFObject er et gratis og open source JavaScript-bibliotek udviklet til indlejring af PDF-dokumenter på websider. Det virker ved at generere et HTML-indlejringselement og derefter integrere det i HTML-strukturen. Embed-elementet gengiver derefter PDF-dokumentet. PDFObject er ikke en renderer i sig selv; snarere fokuserer det på at skabe embed-elementet og placere det i HTML. Det kan oprette integrerede elementer til visning af PDF-filer i fuld størrelse eller inden for bestemte sektioner af websiden.

Følgende er nogle af hovedfunktionerne i PDFObject:

• Fallback-mekanisme: PDFObject har en fallback-mekanisme, så i tilfælde, hvor en browser ikke understøtter indlejring af PDF-filer, aktiverer PDFObject automatisk fallback-logikken, hvilket giver udviklere mulighed for enten at give et link til PDF-filen eller enhver anden alternativ logik efter behov .
• PDF.js-integration: PDFObject giver valgfri integration med PDF.js, hvilket gør det muligt for udviklere at indlejre PDF-filer uanset browserens standard-PDF. seer. Denne funktion er nyttig, når browseren ikke understøtter indlejring af PDF-dokumenter i HTML.
• PDF Open Parameters: PDFObject understøtter Adobes proprietære PDF Open Parameters, der tillader udviklere at angive parametre for PDF-visning. Dette inkluderer muligheder som visningstilstand og andre Adobe-specifikke indstillinger. Alle disse parametre kan findes her.

GitHub-statistik

Navn:
Sprog:
Stjerner:
Forgafler:
Licens:
Repository blev sidst opdateret kl

Kom godt i gang med PDFObject

Vi kan downloade PDFObject-biblioteket ved hjælp af npm-modulet:

npm i pdfobject

Integrer PDF i HTML med Browser Support Verification

Vi kan indlejre et PDF-dokument i HTML ved hjælp af PDFObject-biblioteket. Indledningsvis vil vi kontrollere, om browseren understøtter indlejring af PDF-dokumentet i HTML ved hjælp af supportsPDFs-metoden i PDFObject-biblioteket. Hvis den returnerer true, hvilket indikerer, at den understøtter PDF-indlejring i HTML, vil vi indlejre PDF-filen i HTML ved hjælp af embed("document_name.pdf","#elementid") metoden. Denne funktion vil indlejre PDF'en i et bestemt element i HTML'en. Til PDF-indlejring i fuld størrelse nævner vi ikke noget element-id og kalder metoden som embed("document_name.pdf"). Men hvis det returnerer falsk, hvilket indikerer, at det ikke understøtter PDF-indlejring i HTML, vil vi flytte til anden alternativ logik efter behov. Tjek nedenstående kodestykke for detaljer:

Produktion

Følgende output viser PDF-dokumentet, der er indlejret i HTML:

Opret en reservemekanisme

Vi kan etablere en fallback-mekanisme, mens vi indlejrer en PDF på en webside ved hjælp af PDFObject, som aktiveres, når browseren ikke understøtter indlejring af PDF i HTML. PDFObject bruger en parameter kaldet fallbackLink, som indeholder en alternativ logik, mens funktionen embed kaldes. Så hvis en browser ikke understøtter indlejring af PDF'er, udføres koden i fallbackLink i det udpegede div element. Tjek nedenstående kodestykke for detaljer:

Produktion

Output-skærmbilledet viser indholdet, der vises af fallback-mekanismen. Fallback-mekanismen blev aktiveret, da browseren ikke understøttede indlejring af PDF'er i HTML.

Integrer PDF med Adobes PDF Open Parameters

Vi kan indlejre PDF'er sammen med nogle åbningsparametre ved hjælp af PDFObject-biblioteket. Vi vil bruge metoden PDFObject.embed("myfile.pdf", "#my-container", {pdfOpenParams: { parameters }}) til at indlejre PDF-dokumentet i HTML sammen med åbningsparametrene . Disse Åbne PDF-parametre inkluderer funktioner såsom at åbne PDF'en og rulle til et bestemt sidetal. Tjek nedenstående kodestykke for detaljer:

Produktion

Følgende skærmbillede viser PDF-dokumentet indlejret i HTML med yderligere parametre, der får embed-elementet til at rulle til side nummer 3 efter gengivelsen:

Integrer PDF ved at integrere PDF.js

Som vi ved, afhænger PDFObject af browserens støtte til at indlejre PDF'er i HTML, men det giver en alternativ metode til at gengive PDF'er, hvis browseren ikke understøtter det. Den alternative metode er at integrere PDF.js med PDFObject. For at gøre det skal vi konfigurere PDF.js på vores server, og derefter vil vi videregive ForcePDFJS: true og PDFJS_URL: path/to/viewer.html/in/pdf.js-parametre til embed-funktionen.

Bemærk: I nedenstående eksempelkodestykke har vi oprettet og startet en server, der indeholder PDF.js-biblioteket, så http://localhost:8888 peger på PDF.js-biblioteket.

Produktion

Følgende skærmbillede viser det gengivne PDF-dokument ved at integrere PDFObject med PDF.js:

Konklusion

Som konklusion er PDFObject et letanvendeligt JavaScript-bibliotek til indlejring af PDF-dokumenter i HTML. Selvom det ikke fungerer som en renderer og er afhængig af browserens understøttelse af indlejringselementer, hvilket kan forårsage problemer såsom en ødelagt brugergrænseflade i browsere, der ikke understøtter indlejringselementer, men biblioteket har funktioner til at løse sådanne problemer gennem dets supportdetektion for indlejringselement og tilbagefaldsmekanisme. Vi kan også gengive PDF'er i browsere, der ikke understøtter indlejrede elementer ved at integrere PDF.js med PDFObject. På trods af sine begrænsninger skiller PDFObject sig ud som et værdifuldt værktøj til at indlejre og gengive PDF-dokumenter på websider.

Lignende Produkter