Open Source JavaScript PDF Viewer-bibliotheek

Wat is PDFObject?

PDFObject is een gratis en open source JavaScript-bibliotheek ontwikkeld voor het insluiten van PDF-documenten in webpagina's. Het werkt door een HTML-insluitelement te genereren en dit vervolgens in de HTML-structuur te integreren. Het insluitelement rendert vervolgens het PDF-document. PDFObject is zelf geen renderer; het richt zich eerder op het maken van het insluitelement en het plaatsen ervan in de HTML. Het kan insluitelementen maken voor het weergeven van PDF's op volledige grootte of binnen specifieke secties van de webpagina.

Hieronder volgen enkele van de belangrijkste kenmerken van PDFObject:

• Fallback-mechanisme: PDFObject heeft een fallback-mechanisme, dus in gevallen waarin een browser het insluiten van PDF's niet ondersteunt, activeert PDFObject automatisch de fallback-logica, waardoor ontwikkelaars indien nodig een link naar de PDF of een andere alternatieve logica kunnen bieden .
• PDF.js-integratie: PDFObject biedt optionele integratie met PDF.js, waardoor ontwikkelaars PDF's kunnen insluiten, ongeacht de standaard-PDF van de browser kijker. Deze functie is handig als de browser het insluiten van PDF-documenten in HTML niet ondersteunt.
• PDF Open Parameters: PDFObject ondersteunt Adobe's eigen PDF Open Parameters waardoor ontwikkelaars parameters voor PDF-weergave kunnen specificeren. Dit omvat opties zoals de weergavemodus en andere Adobe-specifieke instellingen. Al deze parameters zijn hier te vinden.

GitHub-statistieken

Naam:
Taal:
Sterren:
Vorken:
Licentie:
De opslagplaats is voor het laatst bijgewerkt op

Aan de slag met PDFObject

We kunnen de PDFObject-bibliotheek downloaden met behulp van de npm-module:

npm i pdfobject

Sluit PDF in HTML in met browserondersteuningsverificatie

We kunnen een PDF-document in HTML insluiten met behulp van de PDFObject-bibliotheek. In eerste instantie zullen we controleren of de browser het insluiten van het PDF-document in HTML ondersteunt met behulp van de supportsPDFs methode van de PDFObject-bibliotheek. Als het waar retourneert, wat aangeeft dat het het insluiten van PDF's in HTML ondersteunt, zullen we de PDF insluiten in de HTML met behulp van de embed("document_name.pdf","#elementid") methode. Deze functie sluit de PDF in een specifiek element in de HTML in. Voor het insluiten van PDF's op volledige grootte vermelden we geen enkel element-ID en noemen we de methode embed("document_name.pdf"). Als het echter false retourneert, wat aangeeft dat het geen PDF-insluiting in HTML ondersteunt, gaan we indien nodig over op andere alternatieve logica. Bekijk het onderstaande codefragment voor de details:

De volgende uitvoer toont het PDF-document ingebed in de HTML:

Creëer een terugvalmechanisme

We kunnen een terugvalmechanisme instellen tijdens het insluiten van een PDF in een webpagina met behulp van PDFObject, dat wordt geactiveerd wanneer de browser het insluiten van PDF in HTML niet ondersteunt. PDFObject gebruikt een parameter genaamd fallbackLink die een alternatieve logica bevat bij het aanroepen van de functie embed. Dus als een browser het insluiten van PDF's niet ondersteunt, wordt de code in de fallbackLink uitgevoerd in het aangewezen div element. Bekijk het onderstaande codefragment voor de details:

De uitvoerscreenshot toont de inhoud die wordt weergegeven door het fallback-mechanisme. Het fallback-mechanisme werd geactiveerd toen de browser het insluiten van PDF's in HTML niet ondersteunde.

Sluit PDF in met Adobe's PDF Open-parameters

We kunnen PDF's samen met enkele openingsparameters insluiten met behulp van de PDFObject-bibliotheek. We zullen de methode PDFObject.embed("myfile.pdf", "#my-container", {pdfOpenParams: { parameters }}) gebruiken om het PDF-document samen met de openingsparameters in de HTML in te sluiten . Deze PDF Open Parameters omvatten functies zoals het openen van de PDF en scrollen naar een specifiek paginanummer. Bekijk het onderstaande codefragment voor de details:

De volgende schermafbeelding toont het PDF-document dat is ingesloten in de HTML met aanvullende parameters die ervoor zorgen dat het insluitelement naar paginanummer 3 scrollt nadat het is weergegeven:

Sluit PDF in door PDF.js te integreren

Zoals we weten is PDFObject afhankelijk van de ondersteuning van de browser om PDF's in HTML in te sluiten, maar het biedt wel een alternatieve methode om PDF's weer te geven als de browser dit niet ondersteunt. De alternatieve methode is om PDF.js te integreren met PDFObject. Om dit te doen, moeten we PDF.js op onze server instellen en dan zullen we ForcePDFJS: true en PDFJS_URL: path/to/viewer.html/in/pdf doorgeven .js-parameters naar de embed-functie.

Opmerking: In het onderstaande voorbeeldcodefragment hebben we een server gemaakt en geïnitieerd die de bibliotheek PDF.js bevat, dus http://localhost:8888 verwijst naar de bibliotheek PDF.js.

De volgende schermafbeelding toont het gerenderde PDF-document door PDFObject te integreren met PDF.js:

Conclusie

Kortom, PDFObject is een eenvoudig te gebruiken JavaScript-bibliotheek voor het insluiten van PDF-documenten in HTML. Hoewel het niet functioneert als een renderer en afhankelijk is van de ondersteuning van de browser voor insluitelementen, wat problemen kan veroorzaken zoals een kapotte gebruikersinterface in browsers die het insluitelement niet ondersteunen, maar de bibliotheek beschikt over functies om dergelijke problemen op te lossen via de ondersteuningsdetectie voor insluitelement en terugvalmechanisme. We kunnen PDF's ook weergeven in browsers die geen insluitelementen ondersteunen door PDF.js te integreren met PDFObject. Ondanks zijn beperkingen onderscheidt PDFObject zich als een waardevol hulpmiddel om PDF-documenten in webpagina's in te sluiten en weer te geven.

Vergelijkbare Producten