Issue with watermark being removed

Technical Support
1

PDF.js Express Version
7.3.2

Detailed description of issue
After purchasing my key and installing it… I still see the watermark:
Sample URL:
https://frame-systems--full0421.lightning.force.com/lightning/r/Project__c/a201Q0000079h60QAA/view

Domain configured for my account:

Expected behaviour
{Provide a screenshot or description of the expected behaviour}

Does your issue happen with every document, or just one?
Every document

Link to document
It is behind authentication

Code snippet
WebViewer(

      {

        path: '/resource/PDFJS/lib',

        licenseKey: '{license key here}',

        enableFilePicker: true,

        config: '/resource/PDFJS/lib/config.js' 

      },

      document.getElementById('viewer')

    );
2

Hi there,

Are you seeing any errors in the console? Is the request to auth.pdfjs.express successful (returning 200)? Are there any other suspicious 404s in the network tab?

Also it would be very useful if I could get access to that URL somehow.

Thanks,
Logan

3

I am not seeing any request to auth.pdfjs.express - xhr or otherwise.
I am seeing this error on the console though:

image
image1887×188 16.5 KB

4

I would be glad to have a zoom conference with you and demonstrate the issue… and you can walk through the code even to see what we are doing. We would like to get this resolved if possible tomorrow 7/13/2021. Thanks.

5

Hi there,

The errors you are seeing are due to WebViewer not being able to load its assets properly. As the error states, all the resources must be available where-ever you specify in the path parameter.

Note that these resources cannot be loaded from a different domain due to browser restrictions (as the first warning message states).

I actually have a salesforce specialist on my team, I will chat with them and see the best way to load these assets in Salesforce.

Thanks,
Logan

6

Hi,

I was told that you need to load assets a bit differently in salesforce (assuming you are storing assets in staticresources):

First you need to import:

import { loadScript } from 'lightning/platformResourceLoader';

And then initialize the project like so:

export default class PdftronWvInstance extends LightningElement {
//... shortened
  renderedCallback() {
    var self = this;

    //use flag to prevent re-initialization
    if (this.uiInitialized) {
      return;
    }
    this.uiInitialized = true;

    Promise.all([
      loadScript(self, libUrl + '/webviewer.min.js')
    ])
      .then(() => {
        var myObj = {
          libUrl: libUrl,
          namespacePrefix: '',
        };
        var url = myfilesUrl + '/webviewer-demo-annotated.pdf';

        const viewerElement = this.template.querySelector('div')

        const viewer = new PDFTron.WebViewer({
          path: libUrl, // path to the PDFTron 'lib' folder on your server
          custom: JSON.stringify(myObj),
          config: myfilesUrl + '/config_apex.js',
          l: 'YOUR_LICENSE_KEY_HERE',
        }, viewerElement);

        viewerElement.addEventListener('ready', () => {
          this.iframeWindow = viewerElement.querySelector('iframe').contentWindow;
        })
      })
      .catch(console.error);
  }

//.. other stuff

Then, all your custom WV code can go inside config_apex.js. See this guide for more info on config files.

We also have a sample of loading the library inside of salesforce. Note that this is sample uses PDFTron WebViewer and not PDF.js Express, but all the concepts are the same.

Please note that all this is due to browser restrictions and not PDF.js Express itself.

If you have any issues or any questions please let me know.

Thanks!
Logan

7

I have this functioning…
with the auth return being returned:

https://auth.pdfjs.express/?key=123
With the response
{“key”:“binary value - retracted for security”}

However I’m still not getting the license key to not show

Thanks

8 
import { LightningElement, track, wire } from 'lwc';

import { CurrentPageReference } from 'lightning/navigation';

import { loadScript } from 'lightning/platformResourceLoader';

import libUrl from '@salesforce/resourceUrl/PDFJS';

import { registerListener, unregisterAllListeners } from 'c/pubsub';

export default class pdfExpressWebViewer extends LightningElement {

  @wire(CurrentPageReference) pageRef;

  disconnectedCallback() {

      unregisterAllListeners(this);

  }

  divHeight = 600;

  uiInitialized = false;

  renderedCallback() {

    if (this.uiInitialized) {

        return;

    }

    this.uiInitialized = true;

    Promise.all([

        loadScript(this, libUrl + '/webviewer.min.js')

    ])

    .then(() => {

       this.initUI();

    })

    .catch(console.error);

  }

  initUI() {

    const viewerElement = this.template.querySelector('div')

    const viewer = new WebViewer({

      path: libUrl,

      licenseKey: '###########KEY VALUE###',

      enableFilePicker: true,

      config: libUrl+'/config.js' 

    }, viewerElement);

    viewerElement.addEventListener('ready', () => {

      this.iframeWindow = viewerElement.querySelector('iframe').contentWindow

    })

  }

}
9

image
Watermark is still showing even though auth call is firing with result… and code is as suggested.

10

I sent you a private message to set up a meeting with one of our Salesforce developers

Cheers,
Dustin