Skip to main content
Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

AB PPT PDF Viewer

Discovery - PPT PDF Viewer

The scope of this story is to determine if there is a good solution to showing PPT and PDF files on page. We’ve discussed functionality similar to what Confluence has today. This could be a library or 3rd party tool.

Current State

Currently, AB does not have an integrated PPT or PDF viewer. All of the current links on AB found that have PDF files linked will either open the PDF in a separate tab (behavior experiences in Google Chrome) or download the PDF (untested in other browsers).

Initial Findings

Short of exporting all documents into PDFs (or all documents into JPG sequences), there does not appear to be a single solution for displaying both (native) PPT and PDF files, but separate solutions for each.

Confluence uses a script called mediaviewer-2.js (this is a copy of the JavaScript file for reference) which, similar to some of the options below, converts PPT and PDF files to images (stored in the server using blob), then displays the images in a modal, also retaining the original file which can be downloaded.

PPT

Make your own PPT viewer by converting the PPT to an image format and serving it up with an interactive carousel or other. An example of this implementation can be found here.

As above, import a PPT, convert to PNG or JPG, then wrap extracted images in a carousel - Another custom solution that can handle both PPT and PDF files which have been converted to images.

ViewerJS - Latest GitHub commit from 08/31/2017, built off of WebODF which relies on the OASIS Open Document Format to view files (requires exporting PPT documents in ODF format).

One Drive Embed Code - This is dependent on using One Drive and has been reported to result in low image quality.

Last resort; Export PPT as a PDF?

PDF

PDFObject - An open-source standards-friendly JavaScript utility for embedding PDF files into HTML documents. Recommends using PDFJS for full browser support.

Stack Overflow Post About Displaying a PDF in a Modal. Uses PDFObject

PDFJS - by Mozilla. Browser support listed here.

Here’s a blog post highlighting all of the ways to Display a PDF in a Web Page. The recommended method to address all browsers? PDFJS

An additional resource about Using PDFJS In A Bootstrap Modal - Here’s the Markup