Nyílt forráskódú JavaScript PDF Viewer Library
Ingyenes és nyílt forráskódú JavaScript-könyvtár PDF dokumentumok megtekintéséhez.
Mi az a PDFObject?
A PDFObject egy ingyenes és nyílt forráskódú JavaScript-könyvtár, amelyet PDF-dokumentumok weboldalakba való beágyazására fejlesztettek ki. Úgy működik, hogy létrehoz egy HTML beágyazási elemet, majd integrálja a HTML-struktúrába. A beágyazási elem ezután megjeleníti a PDF-dokumentumot. A PDFObject maga nem renderer; inkább a beágyazási elem létrehozására és a HTML-ben való elhelyezésére összpontosít. Létrehozhat beágyazott elemeket a PDF-ek teljes méretben vagy a weboldal meghatározott részein belüli megjelenítéséhez.
Az alábbiakban bemutatjuk a PDFObject néhány fő funkcióját:
- Tartalék mechanizmus: A PDFObject tartalék mechanizmussal rendelkezik, így azokban az esetekben, amikor egy böngésző nem támogatja a PDF-ek beágyazását, a PDFObject automatikusan aktiválja a tartalék logikát, lehetővé téve a fejlesztők számára, hogy szükség esetén hivatkozást adjanak a PDF-re vagy bármilyen más logikát. .
- PDF.js integráció: A PDFObject opcionális integrációt biztosít a PDF.js fájlokkal, lehetővé téve a fejlesztők számára, hogy a böngésző alapértelmezett PDF-jétől függetlenül beágyazhassanak PDF-eket néző. Ez a funkció akkor hasznos, ha a böngésző nem támogatja a PDF dokumentumok HTML-be ágyazását.
- PDF Open Parameters: A PDFObject támogatja az Adobe saját fejlesztésű PDF Open Parameters funkcióját, amely lehetővé teszi a fejlesztők számára, hogy paramétereket adjanak meg a PDF megjelenítéséhez. Ez magában foglalja az olyan opciókat, mint a nézet mód és más Adobe-specifikus beállítások. Mindezek a paraméterek itt találhatók.
A PDFObject használatának első lépései
A PDFObject könyvtárat az npm modul segítségével tölthetjük le:
Telepítés NPM segítségével
npm i pdfobject
PDF beágyazása HTML-be a böngésző támogatásának ellenőrzésével
A PDFObject könyvtár segítségével beágyazhatunk egy PDF dokumentumot HTML-be. Először a PDFObject könyvtár supportsPDFs metódusával ellenőrizzük, hogy a böngésző támogatja-e a PDF-dokumentum HTML-be ágyazását. Ha igazat ad vissza, jelezve, hogy támogatja a PDF HTML-be ágyazását, akkor a PDF-et az embed("document_name.pdf","#elementid") metódussal ágyazzuk be a HTML-be. Ez a funkció beágyazza a PDF-fájlt a HTML egy adott elemébe. Teljes méretű PDF beágyazás esetén nem említünk elemazonosítót, és a metódust embed("document_name.pdf") néven fogjuk meghívni. Ha azonban hamis értéket ad vissza, jelezve, hogy nem támogatja a PDF HTML-beágyazását, akkor szükség szerint más alternatív logikára lépünk. A részletekért ellenőrizze az alábbi kódrészletet:
A következő kimenet a HTML-be ágyazott PDF-dokumentumot jeleníti meg:
Hozzon létre egy tartalék mechanizmust
Létrehozhatunk egy tartalék mechanizmust, amikor PDF-et ágyazunk be egy weboldalba a PDFObject használatával, amely akkor aktiválódik, ha a böngésző nem támogatja a PDF HTML-be ágyazását. A PDFObject a fallbackLink nevű paramétert használja, amely egy alternatív logikát tartalmaz az beágyazás függvény meghívásakor. Tehát ha egy böngésző nem támogatja a PDF-ek beágyazását, akkor a fallbackLinkben lévő kód a kijelölt div elemben fut le. A részletekért ellenőrizze az alábbi kódrészletet:
A kimeneti képernyőkép a tartalék mechanizmus által megjelenített tartalmat jeleníti meg. A tartalék mechanizmus akkor aktiválódott, amikor a böngésző nem támogatja a PDF-ek HTML-be ágyazását.
PDF beágyazása az Adobe PDF megnyitási paramétereivel
A PDFObject könyvtár segítségével beágyazhatunk PDF-eket néhány nyitási paraméterrel együtt. A PDFObject.embed("myfile.pdf", "#my-container", {pdfOpenParams: { parameters }}) metódust használjuk a PDF-dokumentum HTML-be ágyazására a nyitó paraméterekkel együtt . Ezek a PDF megnyitási paraméterei olyan funkciókat tartalmaznak, mint a PDF megnyitása és egy adott oldalszámra való görgetés. A részletekért ellenőrizze az alábbi kódrészletet:
A következő képernyőképen a HTML-be ágyazott PDF-dokumentum látható olyan további paraméterekkel, amelyek a beágyazási elemet a 3. oldalra görgetik a megjelenítés után:
PDF beágyazása a PDF.js integrálásával
Mint tudjuk, a PDFObject attól függ, hogy a böngésző támogatja a PDF-ek HTML-be ágyazását, de alternatív módszert kínál a PDF-ek megjelenítésére, ha a böngésző nem támogatja. Alternatív módszer a PDF.js integrálása a PDFObject programmal. Ennek érdekében be kell állítanunk a PDF.js fájlt a szerverünkön, majd átadjuk a ForcePDFJS: true és a PDFJS_URL: path/to/viewer.html/in/pdf.js paramétereket az beágyazás függvényhez.
Megjegyzés: Az alábbi példakódrészletben létrehoztunk és kezdeményeztünk egy PDF.js könyvtárat tartalmazó szervert, így a http://localhost:8888 a PDF.js könyvtárra mutat.
A következő képernyőkép a PDFObject és a PDF.js program integrálásával előállított PDF-dokumentumot mutatja:
Következtetés
Összefoglalva, a PDFObject egy könnyen használható JavaScript-könyvtár PDF-dokumentumok HTML-be ágyazására. Bár nem működik megjelenítőként, és a böngésző beágyazott elemek támogatására támaszkodik, amelyek problémákat okozhatnak, például meghibásodott felhasználói felület olyan böngészőkben, amelyek nem támogatják a beágyazott elemet, de a könyvtár rendelkezik funkciókkal az ilyen problémák megoldására a támogatás észlelése révén. beágyazási elem és tartalék mechanizmus. A PDF.js és a PDFObject integrálásával olyan böngészőkben is renderelhetünk PDF-eket, amelyek nem támogatják a beágyazott elemeket. Korlátai ellenére a PDFObject értékes eszköz a PDF dokumentumok weboldalakba való beágyazására és megjelenítésére.
