At PDFTron, we’ve worked with many clients who use Salesforce’s full-featured app framework to develop apps accessing the wealth of information stored in Salesforce databases. However, a number of these clients expressed frustration when trying to display PDF
, DOCX
, XLSX
, or PPTX
documents within their web-based Salesforce solutions. Salesforce provides a few PDF offerings and nothing for MS Office. But as we’ve written before: our clients found the PDF options problematic for a few different reasons.
So two years ago, we came up with an answer: a specific build of our pure JavaScript PDF and MS Office SDK for Salesforce -- crafted to work around issues hosting libraries with Salesforce. This enabled users to open, view, and annotate PDF or MS Office documents entirely within a Salesforce app without you or your users needing any MS Office software or MS Office licenses. And now with the recent release of Salesforce Lightning Web Components supporting the latest versions of JavaScript, we were able to upgrade our Salesforce fix to support the latest version of WebViewer, ensuring even better rendering accuracy and access to the latest and greatest web features.
If you’re interested in plugging a professional PDF and MS Office document viewer into your Salesforce web experience -- read on! This article will show you how to add PDFTron WebViewer to Salesforce as a Salesforce Lightning Web Component.
Getting Started
To get started with WebViewer and Salesforce, you’ll first need to clone our sample Lightning Web Component project from Github. You can find the sample project here. You will also need to download WebViewer.
Setting up Salesforce DX
Next you’ll need to set up Salesforce DX for your organization through your Salesforce Dev Hub -- or by signing up for a Dev Hub trial. Follow the instructions in the Salesforce DX Setup Guide or in the App Development with Salesforce DX Trailhead module to get started. The steps include:
- Enable Dev Hub in your project
- Install the Salesforce DX CLI
- Install Visual Studio Code (On Mac computers Visual Code is not needed)
Optimizing WebViewer Source Code for Salesforce
Now you need to optimize the original PDFTron WebViewer code for Salesforce. To accomplish this, extract the WebViewer.zip
that you downloaded earlier into a folder and run this npm script:
$ npm run optimize
You will then encounter the following prompts, which you should answer y/n as indicated:
Optimize: Do you want us to backup your files before optimizing? [y/n]: y
Optimize: Will you be using WebViewer Server? ... [y/n]: n
Optimize: Will you be converting all your documents to XOD? ... [y/n]: n
Optimize: Do you need client side office support? [y/n]: y
Optimize: Do you need the full PDF API? ... [y/n]: y
Optimize: Do you want to use the production version of PDFNet.js? ... [y/n]: n
Optimize: Do you need to deploy to Salesforce? ... [y/n]: y
After answering “y” to “Do you need to deploy to Salesforce?” the script will optimize and zip the source code you’ll need later.
Note that this optimization produces .zip files of no more than 5 mb in size -- small enough for safe upload to the Salesforce platform.
Installing the Sample LWC App using Salesforce DX
Next you’ll need to clone our sample webviewer-salesforce
project, configure it accordingly, and get it up and running. Follow these steps:
- Clone the
webviewer-salesforce
from Github repo:
git clone git@github.com:PDFTron/webviewer-salesforce.git
cd webviewer-salesforce
- Copy all the zip files generated after running the npm optimizing script from the output folder
webviewer-salesforce
into theforce-app/main/default/staticresources
folder of your newly cloned project.

Figure: The files you will need to copy from the “webviewer-salesforce” directory.
You can add your WebViewer license key in
staticresources/myfiles/config.js
file or add it in WebViewer constructor by passingl: "LICENSE_KEY"
option.If you haven’t done so, authenticate with your hub org and provide it with an alias (DevHub in the command below) from your terminal (macOS) or cmd (Windows). Execute following command as is.
sfdx force:auth:web:login --setdefaultdevhubusername --setalias DevHub
- Enter your Dev Hub org credentials in the browser that opens. Enable
devhub
by typingdev hub
in the quick find search and toggle toenable
as shown in the picture below.
- Create a scratch org using the
config/project-scratch-def.json
file, set the username as your default, and assign it an alias by replacingmy-scratch-org
with your own alias name.
sfdx force:org:create --setdefaultusername -f config/project-scratch-def.json --setalias my-scratch-org
- Push the app to your scratch org:
sfdx force:source:push -f
- Open the scratch org:
sfdx force:org:open
- A browser will open where you should click the app launcher icon, and select PDFTron.

Here's the opened app:

Include the following in your profile to view the PDFTron application and tabs from the sample repository:
<?xml version="1.0" encoding="UTF-8"?>
<Profile xmlns="http://soap.sforce.com/2006/04/metadata">
<applicationVisibilities>
<application>PDFTron</application>
<default>false</default>
<visible>true</visible>
</applicationVisibilities>
<tabVisibilities>
<tab>File_Browser</tab>
<visibility>DefaultOn</visibility>
</tabVisibilities>
<tabVisibilities>
<tab>WebViewer</tab>
<visibility>DefaultOn</visibility>
</tabVisibilities>
<userLicense>Salesforce</userLicense>
</Profile>
Implementation Details for Developers
Setting Worker Paths in Config.js
Optimizing the original WebViewer source code for the Salesforce platform means that we will also have to set a few paths in config.js
in order for WebViewer to function properly.
Open the config.js
file in your myfiles folder and paste the following:
var resourceURL = '/resource/'
window.Core.forceBackendType('ems');
var urlSearch = new URLSearchParams(location.hash)
var custom = JSON.parse(urlSearch.get('custom'));
resourceURL = resourceURL + custom.namespacePrefix;
// office workers
window.Core.setOfficeWorkerPath(resourceURL + 'office')
window.Core.setOfficeAsmPath(resourceURL + 'office_asm');
window.Core.setOfficeResourcePath(resourceURL + 'office_resource');
// pdf workers
window.Core.setPDFResourcePath(resourceURL + 'resource')
if (custom.fullAPI) {
window.Core.setPDFWorkerPath(resourceURL+ 'pdf_full')
window.Core.setPDFAsmPath(resourceURL +'asm_full');
} else {
window.Core.setPDFWorkerPath(resourceURL+ 'pdf_lean')
window.Core.setPDFAsmPath(resourceURL +'asm_lean');
}
// external 3rd party libraries
window.Core.setExternalPath(resourceURL + 'external')
window.Core.setCustomFontURL('https://pdftron.s3.amazonaws.com/custom/ID-zJWLuhTffd3c/vlocity/webfontsv20/');
Communicating with CoreControls from Lightning Web Component
On the Salesforce platform, Lightning Web Components have limited access to the WebViewer’s iframe due to LockerService requirements. However, with Lightning Components, you can still enable limited communication between components with the postMessage mechanism.
Here is implementation of the postMessage
mechanism used in our sample project. You can use this approach to communicate with the iframe’s contentWindow.
Inside the config.js
file, use the following:
window.addEventListener('message', receiveMessage, false);
function receiveMessage(event) {
if (event.isTrusted && typeof event.data === 'object') {
switch (event.data.type) {
case 'OPEN_DOCUMENT':
event.target.instance.UI.loadDocument(event.data.file)
break;
default:
break;
}
}
}
And in the Lightning Web Component, send messages with postMessage
using the following:
import { LightningElement, track, wire } from 'lwc';
import myfilesUrl from '@salesforce/resourceUrl/myfiles';
import libUrl from '@salesforce/resourceUrl/lib';
export default class WebViewer extends LightningElement {
handleFileSelected(file) {
this.iframeWindow.postMessage({type: 'OPEN_DOCUMENT', file: file})
}
initUI() {
const myObj = {
libUrl: libUrl,
fullAPI: false,
namespacePrefix: '',
};
const viewerElement = this.template.querySelector('div');
const viewer = new PDFTron.WebViewer({
path: myObj.libUrl,
fullAPI: myObj.fullAPI,
custom: JSON.stringify(myObj),
initialDoc: 'file.pdf',
config: myfilesUrl + '/config.js',
}, viewerElement);
viewerElement.addEventListener('ready', () => {
this.iframeWindow = viewerElement.querySelector('iframe').contentWindow
});
}
}
To open DOCX
, XLSX
, or PPTX
files simply swap the initialDoc
with the appropriate file. PNG
and JPG
file types are also supported.
Additional Features
You can now start adding different features to your viewer:
Wrap up
To learn more about this integration you can visit our Salesforce documentation section or watch our previously recorded webinar on integrating WebViewer into Salesforce . If you have any questions about implementing WebViewer in Salesforce, please feel free to get in touch and we will be happy to help!