Avoimen lähdekoodin JavaScript PDF Viewer -kirjasto

Mikä on PDFObject?

PDFObject on ilmainen ja avoimen lähdekoodin JavaScript-kirjasto, joka on kehitetty PDF-dokumenttien upottamiseen verkkosivuille. Se toimii luomalla HTML-upotuselementin ja integroimalla sen sitten HTML-rakenteeseen. Upotuselementti tekee sitten PDF-dokumentin. PDFObject ei ole itse renderöijä; pikemminkin se keskittyy upotuselementin luomiseen ja sen sijoittamiseen HTML-koodiin. Se voi luoda upotuselementtejä PDF-tiedostojen näyttämiseksi täysikokoisina tai tietyissä verkkosivun osissa.

Seuraavassa on joitain PDFObjectin pääominaisuuksia:

• Varamekanismi: PDFObjectissa on varamekanismi, joten jos selain ei tue PDF-tiedostojen upottamista, PDFObject aktivoi automaattisesti varalogiikan, jolloin kehittäjät voivat tarjota joko linkin PDF-tiedostoon tai mitä tahansa muuta vaihtoehtoista logiikkaa tarpeen mukaan. .
• PDF.js-integrointi: PDFObject tarjoaa valinnaisen integroinnin PDF.js:n kanssa, jolloin kehittäjät voivat upottaa PDF-tiedostoja selaimen oletus-PDF-tiedostosta riippumatta. katsoja. Tämä ominaisuus on hyödyllinen, kun selain ei tue PDF-dokumenttien upottamista HTML-koodiin.
• PDF:n avoimet parametrit: PDFObject tukee Adoben omia PDF:n avoimia parametreja, joiden avulla kehittäjät voivat määrittää parametreja PDF-näyttöä varten. Tämä sisältää vaihtoehtoja, kuten katselutilan ja muut Adobe-kohtaiset asetukset. Kaikki nämä parametrit löytyvät täältä.

GitHub-tilastot

Nimi:
Kieli:
Tähdet:
Haarukat:
Lisenssi:
Arkisto päivitettiin viimeksi klo

PDFObjectin käytön aloittaminen

Voimme ladata PDFObject-kirjaston käyttämällä npm-moduulia:

npm i pdfobject

Upota PDF HTML:ään selaimen tuen vahvistuksen avulla

Voimme upottaa PDF-dokumentin HTML:ään käyttämällä PDFObject-kirjastoa. Aluksi tarkistamme, tukeeko selain PDF-dokumentin upottamista HTML-muotoon käyttämällä PDFObject-kirjaston menetelmää supportsPDFs. Jos se palauttaa tosi, mikä tarkoittaa, että se tukee PDF-upotusta HTML:ään, upotamme PDF-tiedoston HTML-koodiin embed("document_name.pdf","#elementid")-menetelmällä. Tämä toiminto upottaa PDF-tiedoston tiettyyn HTML-elementtiin. Täysikokoisessa PDF- upotuksessa emme mainitse elementtitunnusta ja kutsumme menetelmää muodossa embed("document_name.pdf"). Jos se kuitenkin palauttaa epätosi, mikä osoittaa, että se ei tue PDF-upotusta HTML:ään, siirrymme tarvittaessa toiseen vaihtoehtoiseen logiikkaan. Katso tarkemmat tiedot alla olevasta koodinpätkästä:

Seuraava tulos näyttää HTML-koodiin upotetun PDF-dokumentin:

Luo varamekanismi

Voimme luoda varamekanismin upottaessamme PDF-tiedostoa verkkosivulle käyttämällä PDFObjectia, joka aktivoituu, kun selain ei tue PDF-tiedoston upottamista HTML-muotoon. PDFObject käyttää parametria nimeltä fallbackLink, joka sisältää vaihtoehtoisen logiikan kutsuessaan embed-toimintoa. Joten jos selain ei tue PDF-tiedostojen upottamista, fallbackLink-linkissä oleva koodi suoritetaan määritetyssä div-elementissä. Katso tarkemmat tiedot alla olevasta koodinpätkästä:

Tulostuskuvakaappaus näyttää varamekanismin näyttämän sisällön. Varamekanismi aktivoitiin, kun selain ei tukenut PDF-tiedostojen upottamista HTML:ään.

Upota PDF Adoben PDF Open -parametreilla

Voimme upottaa PDF-tiedostoja joidenkin avausparametrien kanssa käyttämällä PDFObject-kirjastoa. Käytämme PDFObject.embed("myfile.pdf", "#my-container", {pdfOpenParams: { parameters }}) -menetelmää PDF-dokumentin upottamiseen HTML-koodiin avausparametrien kanssa. . Nämä PDF:n avoimet parametrit sisältävät ominaisuuksia, kuten PDF-tiedoston avaamisen ja vierittämisen tietylle sivunumerolle. Katso tarkemmat tiedot alla olevasta koodinpätkästä:

Seuraavassa kuvakaappauksessa näkyy HTML-koodiin upotettu PDF-dokumentti lisäparametreineen, jotka saavat upotuselementin vierimään sivulle 3 renderöinnin jälkeen:

Upota PDF integroimalla PDF.js

Kuten tiedämme, PDFObject riippuu selaimen tuesta upottaa PDF-tiedostoja HTML:ään, mutta se tarjoaa vaihtoehtoisen menetelmän PDF-tiedostojen hahmontamiseen, jos selain ei tue sitä. Vaihtoehtoinen tapa on integroida PDF.js PDFObjectiin. Jotta voimme tehdä sen, meidän on määritettävä PDF.js palvelimellemme ja sitten välitetään ForcePDFJS: true ja PDFJS_URL: path/to/viewer.html/in/pdf.js-parametrit embed-funktioon.

Huomaa: Alla olevassa esimerkkikoodinpätkässä olemme luoneet ja käynnistäneet palvelimen, joka sisältää PDF.js-kirjaston, joten http://localhost:8888 osoittaa PDF.js-kirjastoon.

Seuraavassa kuvakaappauksessa näkyy renderöity PDF-dokumentti integroimalla PDFObject PDF.js:n kanssa:

Johtopäätös

Lopuksi PDFObject on helppokäyttöinen JavaScript-kirjasto PDF-dokumenttien upottamiseen HTML:ään. Vaikka se ei toimi hahmontajana ja luottaa selaimen upotuselementtien tukeen, mikä voi aiheuttaa ongelmia, kuten rikkinäisen käyttöliittymän selaimissa, jotka eivät tue upotettua elementtiä, mutta kirjastossa on ominaisuuksia, jotka ratkaisevat tällaiset ongelmat tukitunnistuksen avulla. upotuselementti ja varamekanismi. Voimme myös renderöidä PDF-tiedostoja selaimissa, jotka eivät tue upotuselementtejä integroimalla PDF.js:n PDFObjectiin. Rajoituksistaan huolimatta PDFObject erottuu arvokkaasta työkalusta PDF-dokumenttien upottamiseen ja hahmontamiseen verkkosivuille.

Samankaltaisia Tuotteita