Menu
code for pdf embed

Using Code to Embed A PDF in a Website

Are you looking to embed a PDF document into your website for inline viewing? One popular method is to upload the PDF file to an online storage service like Google Drive or Microsoft’s OneDrive, make the file public, and then use the provided IFRAME code to embed the document in your website.

Iframe

Here’s an example of an embed code for Google Drive that works across all browsers to embed PDF:

<iframe

frameborder=”0″

scrolling=”no”

width=”640″

height=”480″

src=”https://drive.google.com/file/d/<<FILE_ID>>/preview”>

</iframe>

This approach is simple and effective, but it does have limitations as you have no control over the presentation of the embed PDF file on your web pages.

Adobe PDF Option

If you prefer a more customized and immersive PDF reading experience on your website, consider using the new Adobe View SDK. This SDK is part of the Adobe Document Cloud platform and embedding PDF files is free.

The Adobe View SDK offers unique features that set it apart from other embed PDF document solutions:

  • It allows you to add annotation tools within the PDF viewer, enabling users to annotate the embedded PDF and download the modified file.
  • For lengthy documents with multiple pages, readers can use the thumbnail view to navigate to any page quickly.
  • The PDF viewer can be customized to hide options for downloading and printing the PDF files.
  • Built-in analytics provide insights into how many people viewed your PDF file and their interactions with it.

One standout feature of the View SDK is the inline embed mode. In this mode, all pages of the embedded PDF document are displayed simultaneously, eliminating users needing to scroll through the document separately. In addition, the PDF controls are hidden, and the pages seamlessly blend with images and other HTML content on your web page.

To use the Adobe View SDK, follow these steps:

  1. Visit adobe.io and create a new set of credentials for your website. Remember that these credentials are valid for a single domain, so if you have multiple websites, you’ll need different credentials for each.
  2. Open the playground provided by Adobe and generate the embed code. Replace the clientId in the sample code with your own credentials, and ensure that the URL points to the location of your PDF file.

<div id=”adobe-dc-view” style=”width: 800px;”></div>

<script src=”https://documentcloud.adobe.com/view-sdk/main.js”></script>

<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 URL>>’ } },

metaData: { fileName: ‘<<PDF File Name>>’ },

},

{

embedMode: ‘IN_LINE’,

showDownloadPDF: false,

showPrintPDF: false,

}

);

});

</script>

For more examples and detailed information, refer to the official documentation and the code repository.

With the Adobe View SDK, you can enhance the viewing experience of PDFs on your website and provide users with interactive and seamless access to your PDF content.

If you doing want to worry about code, you can install a PDF embedded plugin on a WordPress Website via the WordPress plugin ecosystem. Or you can create a widget in Resource Center to generate PDF experiences on any HTML web page.

Related Posts