Het is verbazingwekkend hoeveel informatie we tegenwoordig in PDF-formaat hebben opgeslagen. Volgens de PDF Association worden er elk jaar ongeveer 2,5 biljoen PDF’s gemaakt, die samen 6 procent van het web uitmaken. Als webontwikkelaar kunnen PDF’s op een website echter voor verschillende uitdagingen zorgen:
- De kijkervaring varieert sterk per gebruiker en apparaat omdat deze afhankelijk is van een PDF-viewer. Of deze nu is ingebed in webbrowsers of gratis online bibliotheken, sommige viewers zijn beter dan andere. Adobe Acrobat Reader is over het algemeen de universele standaard om PDF’s goed te bekijken.
- Het wordt voor mij moeilijk om PDF’s in de rest van mijn website te kunnen integreren. Meestal worden gebruikers bij PDF’s gevraagd om PDF’s op hun apparaat te downloaden.
- Het converteren van PDF’s naar HTML is moeilijk en onbetrouwbaar. Als ik inhoud binnen een webpagina wil presenteren die in PDF-indeling is, maak ik de PDF vaak plat om hem gemakkelijker te kunnen insluiten.
- Ik heb geen zicht op hoe mijn bezoeker die PDF’s bekijkt. Dit betekent dat ik geen idee heb of iemand bepaalde pagina’s leest, hoe lang ze op die pagina’s blijven, enz.
Gelukkig genoeg heeft Adobe Adobe PDF Embed API (PDF Embed) uitgebracht, een eenvoudige manier om een PDF direct in uw website op te nemen met slechts een klein stukje code. Het is volledig gratis te gebruiken en rendert client-side binnen uw web app. Je hoeft geen geavanceerde PDF bibliotheek te leren, en het is super eenvoudig om te doen. Er worden geen gegevens gerenderd op Adobe-servers. Je kunt hier zelfs leren hoe je ermee kunt spelen.
NOTHING! Dat is het mooiste hiervan. U hebt niets anders nodig dan een webpagina om PDF Embed te gebruiken.
Demo-site gebruiken om de PDF Embed API uit te proberen
De eenvoudigste manier om kennis te maken met PDF Embed is door het zelf uit te proberen op de demosite. Het is een gemakkelijke bron om aan de slag te gaan omdat u:
- De verschillende beschikbare insluitmodi voor uw PDF’s in realtime kunt bekijken.
- Aanpassen welke functies u wilt als onderdeel van de viewer, zoals annotatiehulpmiddelen, PDF downloaden, PDF afdrukken, paginacontrole, enz.
- Genereert code die u direct in uw website kunt plakken.
Uw Client ID
Als u de PDF Embed in uw eigen code wilt proberen, werkt het zonder een Client ID als u het lokaal gebruikt. Als u het echter in uw website wilt integreren, hebt u een klant-ID nodig. Vraag hier uw klant-ID aan.
Hier volgen een paar belangrijke tips:
- Om een Client ID aan te maken, moet u een Adobe ID hebben. Als u die niet hebt, kunt u zich hier aanmelden met een e-mailadres, Google-, Facebook- of Apple-ID.
- U moet uw applicatiedomein instellen om dit te laten werken.
Als u uw klant-ID hebt gemaakt, wilt u deze kopiëren en gebruiken in uw code.
NOOT: Hoewel u uw configuraties in de Adobe.io Console kunt bewerken, zult u naar de koppeling willen gaan om uw sleutel te maken. Als je je sleutel vanuit de Adobe.io Console aanmaakt, krijg je niet de optie om je domein in te stellen.
Kies uw insluitmodus
Een van de krachtige dingen van PDF Embed is dat u kunt kiezen uit verschillende insluitmodi:
Volledig venster
Volledig venster stelt u in staat om een kijkervaring te creëren die vergelijkbaar is met Adobe Acrobat Reader op uw computer en deze in uw website in te bouwen. Ik vind dit ideaal voor het bekijken van lange documenten, of als ik een vertrouwde PDF-viewervaring in mijn UI wil hebben.
Size Container
Grote containers zijn geweldig voor inhoud zoals PowerPoint-presentaties die naar PDF zijn geconverteerd, of een reeks instructies. Ik vind dit minder ideaal als je lange PDF’s opneemt.
In-Line
In-Line-weergave kan ontwerpers helpen hun ontwerpen in een webpagina in te voegen zonder deze opnieuw te hoeven maken of plat in een afbeelding te hoeven plaatsen. In-Line weergave neemt uw PDF en rendert deze inline als HTML. Ik vind deze insluitmodus handig wanneer je inhoud wilt weergeven zoals infographics die je in Illustrator, InDesign, enz. hebt ontworpen en naar PDF hebt geëxporteerd, maar die nog steeds doorzoekbaar moet zijn en hyperlinks moet bevatten zonder dat je je zorgen hoeft te maken over het herontwerpen voor het web.
Lightbox
De Lightbox opent de PDF-viewer boven op de webpagina voor een meer gerichte weergave. Deze modus is ideaal wanneer u op uw website koppelingen naar PDF-bestanden hebt, maar de weergave wilt beheren, analyses wilt verzamelen en gebeurtenissen wilt activeren op basis van de interactie van uw publiek met de PDF-bestanden die u hebt geplaatst.
Uw code genereren
Wanneer u Demo Site gebruikt en u klikt op Code genereren, ziet het er ongeveer zo uit:
Om te beginnen, moet u de volgende items vervangen:
- Vervang <YOUR_CLIENT_ID> door de Client ID die u hebt gegenereerd.
- Vervang de url parameter met de URL van de PDF die u wilt bekijken.
NOOT: Omdat PDF Embed client-side rendert in de browser, zal het alle ingestelde Cross-Domain restricties respecteren, dus het kan zijn dat u ervoor moet zorgen dat uw headers cross-domain linken toestaan. - Verander bestandsnaam in de naam van uw document. Dit zal in de viewer verschijnen.
Als u dat gedaan hebt, kunt u uw PDF in uw website insluiten. Zo eenvoudig is het!
Voorbeelden die Services SDK vandaag gebruiken
Er zijn een aantal toepassingen die Services SDK vandaag al gebruiken:
- PDF Viewer Component voor AEM
- PDF like a boss
- Microsoft SharePoint Plugin
- Adobe Acrobat voor G Suite
Conclusie
PDF Embed biedt echt veel flexibiliteit om PDF’s te gebruiken op uw websites. U kunt er nog veel meer mee doen, zoals Analytics, Event Listeners en meer, waarover u meer kunt lezen in deze documentatie.
Wij horen graag van u
Als u PDF Embed eenmaal hebt bekeken, horen we graag wat u ervan vindt! Doe mee op het Adobe Document Cloud Forum om uw feedback te geven, of reageer op dit artikel!
UPDATE (07/07/2020): Bijgewerkt om nieuwe Lightbox embed mode toe te voegen en nieuwe header image toegevoegd.
UPDATE (07/31/2020): Bijgewerkt om nieuwe branding weer te geven.