How to Add a PDF or MS Office Document Viewer to Salesforce as a Lightning Web Component

By Sardor Isakov | 2019 Mar 11

6 min

Getting Started

Copied to clipboard

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

Copied to clipboard

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

Copied to clipboard

Now you need to optimize the original Apryse 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, to which you should answer y/n as indicated:

After answering “y” to “Do you need to deploy to Salesforce?” the script will optimize and zip the source code you’ll need later.

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

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

Copied to clipboard

Next you’ll need to clone our sample webviewer-salesforce project, configure it accordingly, and get it up and running. Follow these steps:

1. Clone the webviewer-salesforce from Github repo:

git clone git@github.com:PDFTron/webviewer-salesforce.git
cd webviewer-salesforce

2. Copy all the zip files generated after running the npm optimizing script from the output folder webviewer-salesforce into the force-app/main/default/staticresources folder of your newly cloned project.

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 passing l: "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 the following command as is:

sfdx force:auth:web:login --setdefaultdevhubusername --setalias DevHub

3. Enter your Dev Hub org credentials in the browser that opens. Enable devhub by typing dev hub in the quick find search and toggle to enable as shown in the picture below:

4. Create a scratch org using the config/project-scratch-def.json file, set the username as your default, and assign it an alias by replacing my-scratch-org with your own alias name.

sfdx force:org:create --setdefaultusername -f config/project-scratch-def.json --setalias my-scratch-org

5. Push the app to your scratch org:

sfdx force:source:push -f

6. Open the scratch org:

sfdx force:org:open

7. A browser will open: click the app launcher icon and select Apryse.

Click the app launcher icon and select PDFTron

Here's the opened app:

Include the following in your profile to view the Apryse 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

Copied to clipboard

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:

//@data {"m": true}//
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/');

//@data {"m": true}//
var resourceURL = '/resource/'
window.CoreControls.forceBackendType('ems');

var urlSearch = new URLSearchParams(location.hash)
var custom = JSON.parse(urlSearch.get('custom'));

resourceURL = resourceURL + custom.namespacePrefix;

// office workers
window.CoreControls.setOfficeWorkerPath(resourceURL + 'office')
window.CoreControls.setOfficeAsmPath(resourceURL + 'office_asm');
window.CoreControls.setOfficeResourcePath(resourceURL + 'office_resource');

// pdf workers
window.CoreControls.setPDFResourcePath(resourceURL + 'resource')
if (custom.fullAPI) {
  window.CoreControls.setPDFWorkerPath(resourceURL+ 'pdf_full')
  window.CoreControls.setPDFAsmPath(resourceURL +'asm_full');
} else {
  window.CoreControls.setPDFWorkerPath(resourceURL+ 'pdf_lean')
  window.CoreControls.setPDFAsmPath(resourceURL +'asm_lean');
}

// external 3rd party libraries
window.CoreControls.setExternalPath(resourceURL + 'external')
window.CoreControls.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:

//@data {"m": true}//
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;
    }
  }
}

//@data {"m": true}//
window.addEventListener('message', receiveMessage, false);

function receiveMessage(event) {
  if (event.isTrusted && typeof event.data === 'object') {
    switch (event.data.type) {
      case 'OPEN_DOCUMENT':
        event.target.readerControl.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, swap the initialDoc with the appropriate file. PNG and JPG file types are also supported.

Additional Features

Copied to clipboard

You can now start adding different features to your viewer:

Wrap up

Copied to clipboard

To learn more about this integration, visit our Salesforce documentation section or watch our 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!