Open Source JavaScript PDF Viewer Library

Vad är PDFObject?

PDFObject är ett gratis JavaScript-bibliotek med öppen källkod utvecklat för att bädda in PDF-dokument på webbsidor. Det fungerar genom att generera ett HTML-inbäddningselement och sedan integrera det i HTML-strukturen. Embed-elementet renderar sedan PDF-dokumentet. PDFObject är inte en renderare i sig; snarare fokuserar den på att skapa inbäddningselementet och placera det i HTML. Det kan skapa inbäddade element för att visa PDF-filer i full storlek eller inom angivna delar av webbsidan.

Följande är några av huvudfunktionerna i PDFObject:

• Fallback Mechanism: PDFObject har en reservmekanism så i fall där en webbläsare inte stöder inbäddning av PDF-filer, aktiverar PDFObject automatiskt reservlogiken så att utvecklare antingen kan tillhandahålla en länk till PDF:en eller någon annan alternativ logik efter behov .
• PDF.js-integrering: PDFObject tillhandahåller valfri integration med PDF.js, vilket gör det möjligt för utvecklare att bädda in PDF-filer oavsett webbläsarens standard-PDF. visare. Den här funktionen är användbar när webbläsaren inte stöder inbäddning av PDF-dokument i HTML.
• Öppna PDF-parametrar: PDFObject stöder Adobes egenutvecklade Öppna PDF-parametrar som tillåter utvecklare att ange parametrar för PDF-visning. Detta inkluderar alternativ som visningsläge och andra Adobe-specifika inställningar. Alla dessa parametrar finns här.

GitHub-statistik

Namn:
Språk:
Stjärnor:
Gafflar:
Licens:
Repository uppdaterades senast kl

Komma igång med PDFObject

Vi kan ladda ner PDFObject-biblioteket med hjälp av npm-modulen:

npm i pdfobject

Bädda in PDF i HTML med webbläsarstödsverifiering

Vi kan bädda in ett PDF-dokument i HTML med PDFObject-biblioteket. Inledningsvis kommer vi att kontrollera om webbläsaren stöder inbäddning av PDF-dokumentet i HTML med metoden supportsPDFs i PDFObject-biblioteket. Om den returnerar true vilket indikerar att den stöder PDF-inbäddning i HTML kommer vi att bädda in PDF:en i HTML:en med metoden embed("document_name.pdf","#elementid"). Denna funktion kommer att bädda in PDF:en i ett specifikt element i HTML. För PDF-inbäddning i full storlek kommer vi inte att nämna något element-id och anropar metoden som embed("document_name.pdf"). Men om den returnerar false som indikerar att den inte stöder PDF-inbäddning i HTML så kommer vi att flytta till annan alternativ logik efter behov. Kontrollera nedanstående kodavsnitt för detaljer:

Produktion

Följande utdata visar PDF-dokumentet inbäddat i HTML:en:

Skapa en reservmekanism

Vi kan skapa en reservmekanism när vi bäddar in en PDF i en webbsida med PDFObject som aktiveras när webbläsaren inte stöder inbäddning av PDF i HTML. PDFObject använder en parameter som heter fallbackLink som innehåller en alternativ logik när funktionen embed anropas. Så om en webbläsare inte stöder inbäddning av PDF-filer, exekveras koden som finns i fallbackLink i det angivna div-elementet. Kontrollera nedanstående kodavsnitt för detaljer:

Produktion

Utdataskärmbilden visar innehållet som visas av reservmekanismen. Reservmekanismen aktiverades när webbläsaren inte stödde inbäddning av PDF-filer i HTML.

Bädda in PDF med Adobes PDF Open Parameters

Vi kan bädda in PDF-filer tillsammans med några öppningsparametrar med hjälp av PDFObject-biblioteket. Vi kommer att använda metoden PDFObject.embed("myfile.pdf", "#my-container", {pdfOpenParams: { parameters }}) för att bädda in PDF-dokumentet i HTML tillsammans med öppningsparametrarna . Dessa Öppna PDF-parametrar inkluderar funktioner som att öppna PDF-filen och rulla till ett specifikt sidnummer. Kontrollera nedanstående kodavsnitt för detaljer:

Produktion

Följande skärmdump visar PDF-dokumentet inbäddat i HTML-koden med ytterligare parametrar som gör att inbäddningselementet rullar till sida nummer 3 efter att det har renderats:

Bädda in PDF genom att integrera PDF.js

Som vi vet beror PDFObject på webbläsarens stöd för att bädda in PDF-filer i HTML, men det ger en alternativ metod för att rendera PDF-filer om webbläsaren inte stöder det. Den alternativa metoden är att integrera PDF.js med PDFObject. För att göra det måste vi ställa in PDF.js på vår server och sedan skickar vi ForcePDFJS: true och PDFJS_URL: path/to/viewer.html/in/pdf.js-parametrar till funktionen inbädda.

Obs: I exempelkodavsnittet nedan har vi skapat och initierat en server som innehåller PDF.js-biblioteket så http://localhost:8888 pekar på PDF.js-biblioteket.

Produktion

Följande skärmdump visar det renderade PDF-dokumentet genom att integrera PDFObject med PDF.js:

Slutsats

Sammanfattningsvis är PDFObject ett lättanvänt JavaScript-bibliotek för att bädda in PDF-dokument i HTML. Även om det inte fungerar som en renderare och förlitar sig på webbläsarens stöd för inbäddade element, vilket kan orsaka problem som ett trasigt användargränssnitt i webbläsare som inte stöder inbäddningselement, men biblioteket har funktioner för att lösa sådana problem genom dess stöddetektering för inbäddningselement och reservmekanism. Vi kan också rendera PDF-filer i webbläsare som inte stöder inbäddade element genom att integrera PDF.js med PDFObject. Trots sina begränsningar framstår PDFObject som ett värdefullt verktyg för att bädda in och rendera PDF-dokument på webbsidor.

Liknande Produkter