In this post, you’ll learn how to embed PDF Documents in Web Pages in simple steps.
How do you embed PDF documents into your web pages ?
When it comes to embedding a PDF file in a webpage, one of the most popular methods is to upload the PDF file to your google drive or some other online storage device like Microsoft’s OneDrive.
We will then configure the file’s settings to make the file public and then copy-paste the IFRAME code to embed the document on any website.
Sample PDF embed code for Google Drive
<iframe frameborder=”0″ scrolling=”no”
width=”500″ height=”360″
src=”https://drive.google.com/file/d/<<File _name or File_ID>>/preview”>
</iframe>
As discussed earlier, it is the most common and popular method to embed a PDF to a Website page.
But this method has its own shortcoming, how interesting and elegant your UI&UX may look like but you cannot control the way the embedded PDF looks in your Webpage.
To get a customized reading experience for PDFs in your website, you can opt for the new Adobe View SDK.
Features of Adobe View SDK
- Annotation tools can be added inside the PDF viewer.
- Readers can use the thumbnail view to view any page, if the embedded PDF is of multiple pages.
- The PDF viewer can be customized to hide options for downloading and printing PDF files.
- The analytics tool in the setup helps you to view the PDF statistics like the number of downloads and other paramters.
- It has an inline embed mode.
Let us see this in detail,
Display PDF Pages Inline mode
Inline Mode is a unique Adobe View SDK feature. Using this feature all pages of the embedded PDF document can be displayed on your webpage and the user does not have to scroll another document with the parent web page. The PDF pages are blended with images and other HTML content of the web page.
How to Embed PDFs with the Adobe View SDK?
To embed PDFs with the Adobe view SDK,
- Visit adobe.io or click here.
- Create a new set of credentials for your website.
- Create multiple sets of credentials, if you are managing multiple websites.
- Next, open the playground and generate the embed code.
- Replace the clientId with your credentials.
- The URL in the sample code will point to the location of your PDF file.
Here is a sample code for the embedded PDF
<div id=”adobe-dc-view” style=”width: 800px;”></div>
https://documentcloud.adobe.com/view-sdk/main.js
<script type=”text/javascript”>
document.addEventListener(“adobe_dc_view_sdk.ready”, function () {
var adobeDCView = new AdobeDC.View({
clientId: “<<YOUR_CLIENT_ID>>”,
divId: “adobe-dc-view”
});
adobeDCView.previewFile({
content: { location: { url: “<<PDF Location>>” } },
metaData: { fileName: “<<PDF File Name>>” }
}, {
embedMode: “IN_LINE”,
showDownloadPDF: false,
showPrintPDF: false
});
});
</script>
