PDFs in AEM: Embed PDFs into Your Pages with PDF Viewer

Ben Vanderberg
Sep 29, 2020 · 5 min read

Content can come in a variety of formats in AEM. They could be images, videos, or even PDF documents. When it comes to PDFs, what is often the case is these PDFs are linked to and then rendered in the browser or downloaded to your computer, taking you away from the context and navigation of your own website. You also don’t get any insights into how they were interacting with PDFs other than downloading.

There are a lot of common scenarios where this is the case. For example, you might see white-papers, guides, contracts, documents. If you are using AEM to power a customer portal or an intranet, you could have documents specifically related to a certain person that you want to host online.

As part of AEM Core Components, there is now a new component called PDF Viewer, powered by Adobe PDF Embed API as part of Adobe Document Services. In a previous blog, I wrote in detail how you can take advantage of PDF Embed API. This makes it easy to incorporate it into your AEM pages.

PDF Viewer allows you to embed PDF views into a web page using simple drag and drop. The core component supports all of the embed modes supported as part of PDF Embed API including Full Window, Inline, and Sized Container for use with all sorts of PDF content. As a core component, this means that this can also be extended and customized by AEM developers to meet your specific needs.

In this article, let’s learn more about how we can use PDF Viewer to embed viewing experiences into our webpages.

Requirements

For this article, we are going to assume you are running AEM on a local instance (hence using localhost) but this will work with any installed AEM instance.

Install Packages

  1. In AEM, navigate to Settings > Deployment Packages.
  2. Upload the Core Components package.

How to Configure a Context Aware Configuration

Once you have installed the packages, you will need to configure your Context Aware Configuration. The Context Aware Configuration allows you to set which PDF Embed API Client ID, Analytics Report Suite will be set for a specific site.

Create a new Context Aware Configuration.

  1. In AEM, go to CRX.
  2. Navigate to /conf/<my-site>
  3. Create a new node called sling:configs.
  4. As a sub-node of sling:configs, create a new node called com.adobe.cq.wcm.core.components.internal.services.pdfviewer.PdfViewerCaConfig
  5. You will need to set the following parameters:
    clientId - Required - https://www.adobe.com/go/dcsdks_credentials
    reportSuiteId - Adobe Analytics ID

Using Adobe Analytics will require you to have a matching reportSuiteId as the one you have configured in AEM Sites header or in Adobe Launch. For more information on how to configure Adobe Analytics with PDF Embed API, see the documentation.

Add Core Component to Your App

  1. In AEM, go to CRX.
  2. Navigate to /apps/core/wcm/components/pdfviewer.
  3. Copy this folder.
  4. Add it to your own app.
    Ex. /apps/weretail/components.
  5. Navigate into the pdfviewer component.
    Ex. /apps/weretail/components/pdfviewer/v1/pdfviewer
  6. Add or edit your componentGroup property to place it in your desired Component Group.
    Ex. We.Retail Form
  7. Add or edit your sling:resourceSuperType field to map to the core component.
    Ex. /apps/core/wcm/components/pdfviewer/v1/pdfviewer

Add PDF Viewer to Your Template

Add and Configure the PDF Viewer Component

  1. Drag and drop the PDF Viewer component into your page.
  2. Click to Configure the component.

Configuration

Document Path allows you to set your document path as an absolute URL or AEM Assets path.

Customize

PDF Viewer can be configured to have a variety of different viewing modes:

  • Type
    Whether you want to show as Full Window, Inline, or Sized Container.
  • Default View Mode
    Whether to fit to page or fit to width.
  • Full Screen
  • Annotation Tools
    Whether the annotation tools will be available for customers to add annotations and comments to the PDF.
  • Left Hand Panel
    Whether the left hand panel which shows page previews and bookmarks is shown.
  • Download PDF
    Whether the viewer has the ability to download a PDF copy of the document.
  • Print PDF
    Whether the viewer has the ability to print a copy of the document.
  • Page Controls
    Toggle to display page controls.
  • Dock
    Toggle view of the dock at the bottom of the viewer.

Previewing Your Configuration

Summary

If you would like to learn more about how you can extend this even more, have a look at the documentation to see how you can use things like JavaScript events to extend the viewing experience.

Adobe Tech Blog

News, updates, and thoughts related to Adobe, developers…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store