It is amazing just how much information we have today stored in PDF format. According to the PDF association, approximately 2.5 trillion PDFs are created every year, making up 6 percent of the web. However, as a web developer, PDFs on a website can present a variety of challenge:
Fortunately, Adobe has released Adobe PDF Embed API (PDF Embed), an easy way for you to incorporate a PDF directly into your website with just an easy snippet of code. It is entirely free to use and renders client-side within your web app. You don’t have to learn a sophisticated PDF library, and it is super easy to do. No data is rendered on Adobe servers. In fact, you can even learn how to play with it here.
NOTHING! That’s the greatest thing about this. You don’t need anything other than a webpage to use PDF Embed.
The easiest way to get acquainted with the PDF Embed is to actually try it out on the Demo Site. It’s an easy resource to get started because it allows you to:
If you want to try the PDF Embed in your own code, it works without a Client ID when you are using it locally. However, if you want to actually incorporate it into your website, you will need to get Client ID. Get your Client ID here.
Here are a couple of important tips:
Once you create your Client ID, you will want to copy and use that in your code.
NOTE: While you can edit your configurations in the Adobe.io Console, you will want to go to the link to create your key. If you create your key from within the Adobe.io Console, it won’t give you the option to set your domain.
One of the powerful things about the PDF Embed is that you have different embed modes to choose from:
Full Window allows you to take a viewing experience similar to Adobe Acrobat Reader on your computer and embed it into your website. I find this ideal when viewing long-form documents, or if I want to have a familiar PDF viewing experience in my UI.
Sized containers are great for content such as PowerPoint presentations that were converted to PDF, or a series of instructions. I find this less ideal of an experience if you are incorporating long-form PDFs.
In-Line view can help designers embed their designs into a web page without having to rebuild it or flatten it into an image. In-Line view takes your PDF and renders it inline as HTML. I like this embed mode for when you want to display content like infographics that you designed in Illustrator, InDesign, etc. and exported to PDF, but want it to still be searchable and have hyperlinks without having to worry of re-designing for web.
The Lightbox opens the PDF Viewer on top of the web page to provide a more focused view. This mode is ideal when you have links to PDF files throughout your web site but want to control the viewing experience, collect analytics, and trigger events based on how your audience is interacting with the PDF files you’ve posted.
When you’re using Demo Site and you click on Generate code, it will look something like this:
When you put PDFs on your website with PDF Embed API, you also want to create or optimize your PDFs as well. Adobe PDF Services allows you to:
PDF Embed really allows for a lot of flexibility to leverage PDFs with you websites. There is a lot more you can do with it from Analytics, Event Listeners, and more which you can learn more about in this documentation.
Once you have a look at the PDF Embed, we’d love to hear your thoughts! Get involved in the Adobe Document Cloud Forum to give your feedback, or reply to this article!