ComPDF Salesforce SDK Integration

Integrate into a New Salesforce Project as a Lightning Web Component

ComPDF Salesforce SDK enables you to open PDF file inside Salesforce. This unlocks the full functionality of ComPDF Web SDK in Salesforce, including view, annotations, manipulate, and signatures PDF.

This README explains how to integrate ComPDF Web SDK into a new Salesforce project. The integration works as a Lightning web component (LWC) that you can add to any Salesforce organization.

ComPDF Salesforce SDK shares the same APIs as ComPDF Web SDK Standalone. For more information on customizing your Salesforce application, see the ComPDF Web SDK Standalone documentation.

Obtain your license key

A license key is required to run WebViewer. You can refer to our license help guide to obtain a license key.

Requirements

Before continuing, perform all of the following actions:

• Install the Salesforce CLI.
• Install the latest stable version of Node.js and NPM.

Deploying the Package to your Salesforce

To deploy the ComPDF Web SDK package to your Salesforce organization, follow these steps.

1. Set up your Salesforce development environment. Follow the instructions in the Setup Development Guide or in the Setup Development Trailhead Trailhead module. The steps include:

   • Enable Dev Hub in you project.
   • Install Salesforce CLI. Or see the Salesforce CLI Setup Guide for complete installation instructions.
   • (Optional) Install Salesforce Extensions for Visual Studio Code.

2. Clone the ComPDF Salesforce SDK repository from GitHub repo:

   git clone https://github.com/ComPDFKit/compdf-web-example-salesforce.git

3. In the terminal, go to the ComPDF Salesforce SDK project folder and run the following command to install the npm module.

   npm install

4. The ComPDF Salesforce SDK integration example now makes use of the ComPDF Web SDK available from our server at https://static.compdf.com, which means it's no longer limited by Salesforce's upload assets size 5MB limit.

   In order to set the ComPDF Web SDK version you want to use, open ./force-app/main/default/lwc/compdfViewer/compdfViewer.js and edit the line 16 to reflect the ComPDF Web SDK version. For example, in order to use version 2.8.2, you should change the URL pointing to the CDN to:

   @api assetBase = 'https://static.compdf.com/[email protected]'

5. If you have a paid license key, you can add the licenseKey property value to the WebViewer constructor here ./force-app/main/default/lwc/compdfViewer/compdfViewer.js.

   licenseKey: 'YOUR_LICENSE_KEY'

6. If you have not already done so, authenticate with your hub org and provide it with an alias (DevHub in the command below):

   sf org login web --set-default-dev-hub --alias DevHub

7. Enter your Dev Hub org credentials in the browser that opens. After you log in successfully, you can close the browser. Create a scratch org using the config/project-scratch-def.json file, set the username as your default, and assign it an alias("myScratchOrg" in the command below).

   sf org create scratch --definition-file config/project-scratch-def.json --set-default --target-dev-hub DevHub --alias myScratchOrg

8. Push the app to your scratch org:

   sf project deploy start --source-dir force-app --target-org myScratchOrg --concise

9. Open the scratch org:

   sf org open --target-org myScratchOrg

10. (Optional) If you need to upload or save large files (over 6 MB), it is recommended to add your Access Token to the accessToken property in the ./force-app/main/default/lwc/compdfViewer/compdfViewer.js file. You can view your org information and obtain the Access Token by running the following command:

sf org display --target-org myScratchOrg

accessToken = 'YOUR_ACCESS_TOKEN'

Next, we still need to do some configuration in your Salesforce organization setup.

Changing the Security Settings

ComPDF Salesforce SDK example uses resource packages provided by our third-party server, it is necessary to add trusted URLs in Salesforce. To change the default security settings, follow these steps.

1. In Salesforce, go to Security > Trusted URLs.

2. Click New Trusted URL.

3. Configure URL properties：

   • Customize an API name, such as "ComPDF".
   • Write the following URL in the URL input box.

   https://static.compdf.com

   • Ensure that the 'Active' attribute is checked, and check all CSP directives.

4. Click on Save.

Using the ComPDF Web SDK in Salesforce

Then you can use ComPDF Web SDK in your opening scratch organization:

1. Click the app launcher icon in the top left, and select ComPDF. Then you should see the application start up.

2. Click browse to upload local PDF files, or open a file from Salesforce.

Implementation Details for Developers

Communicating with CoreControls from Lightning Web Component

On the Salesforce platform, Lightning Web Component have limits accessing to WebViewer's iframe due to LockerService requirements. Lightning Component can use limited communication mechanism between components using postMessage.

Here is implementation of the postMessage mechanism used in our sample github project and you can use this similar approach to communicate with the iframe's contentWindow.

Inside config.js file, use following:

window.addEventListener('message', receiveMessage, false);

function receiveMessage(event) {
  if (event.isTrusted && typeof event.data === 'object') {
    switch (event.data.type) {
      case 'viewerLoaded':
        customUI();
        break;
      case 'OPEN_DOCUMENT':
        instance.UI.loadDocument(event.data.file)
        if (event.data.cv) {
          currentCv = event.data.cv;
        }
        break;
      default:
        break;
    }
  }
}

In the Lightning Web Component send messages with postMessage as following:

import { LightningElement, api, wire } from 'lwc'
import BOOT from '@salesforce/resourceUrl/compdf_boot'

export default class CompdfViewer extends LightningElement {

  async initViewer() {
    const container = this.template.querySelector('.pdf_viewer')

    window.ComPDFKitViewer?.init({
      pdfUrl: this.pdfUrl,
      license: this.licenseKey,
      path: this.assetBase,
      config: window.location.origin + BOOT + '/config.js'
    }, container)

    container.addEventListener('ready', () => {
      this.iframeWindow = container.querySelector('iframe').contentWindow
    })
  }

  handleFileSelected(data) {
    this.iframeWindow.postMessage({ type: 'OPEN_DOCUMENT', ...data }, '*')
  }
}