This article explains how to embed PDFs in wenpages using Adobe View. There are several different ways to embed PDFs in webpages. The most common method is to upload the PDF to a cloud storage service like Google Drive or OneDrive and then use an IFRAME service to embed it in the webpages. This method is simple to implement but it doesn’t give you any control over the appearance of the PDF on the webpage. If someone has to view something in the PDF, first it opens the whole PDF and then allows users to move page by page with no quick way to find something.
Thankfully, you can get more control over the PDF appearance on the webpages using Adobe View SDK. It is a part of the Adobe Document Cloud platform that you can use for free. It offers multiple ways to embed a PDF in webpages including Full-Window, Sized Container, and In-Line mode. Apart from the visuals, you can also enable annotation tools that allow users to annotate the file on the webpage and download a copy of the modified version of the PDF. Furthermore, you can enable/disable the download and print options and customize the page controls as per your liking. With that said, let’s check out how it’s done.
Also read: Free HTML to PDF API to Convert Webpages to PDF
Embed PDFs in Webpages using Adobe View
In order to embed PDFs in webpages using Adobe view SDK. you have to create new credentials for the domain where you want to embed the PDF. To do that, visit the Adobe.io and head to the Console section of Adobe Document Cloud Platform. Select the “DC View SDK” option and enter credentials name and your domain to create new credentials. You don’t have to sign in to create Adobe View SDK credentials.
This gives you new credentials for your domain, we’ll need these credentials later on when we embed the PDF. After creating the credentials, visit the Playground where you get a demo of PDF. Here, you can customize the appearance of PDF and then get the embed code.
PDF Embed Mode
In the DC View SDK Demo, you get three embed modes. You can choose any of those modes that satisfy your needs. These modes are:
- Full Window: This mode shows the PDF in the entire browser windows to prove an immersive view.
- Size Container: This mode shows the PDF in a custom-sized container as slideshow in landscape mode.
- In-Line: This mode embeds the PDF in-line within the context of the webpage.
PDF Options
Apart from the embed modes, DC View also additional PDF options that give you more control over the PDF. These options are:
- Ability to disable Download PDF and Print PDF features
- Enable Annotation
- Add a Full-Screen button
- Change the position of the Page Controls of the PDF
Note: Some of these PDF options are specific to the embed mode.
Embed Code
After making all the desired changes to the demo, click the Generate Code button to get a Code Preview of the selected embed mode with your customization. Now, in that code, replace the ClientId with the credentials you created earlier and replace the URL under content option with the URL to your PDF. After making these changes, you can paste that code to the webpage source where you want to embed the PDF.
Closing Words
This method to embed PDFs in webpages does involve a few extra steps but in return, it gives you more control over the PDF. You can not only change the appearance of the embed mode of the PDF but can also enable annotations and customize the download and other display options.
