Webviewer initialization error

Hi,

I am trying to integrate PDF.JS Express in salessforce lightning web component. I am facing the issue below. However I can the PDF is getting rendered, but the instance promise is not getting resolved.
Detailed description of issue
In browser console log , it throws error
Viewer isn’t instantiated correctly. It could be caused by the ‘path’ option in the WebViewer constructor not being defined correctly. The ‘path’ option should be relative to the HTML file you’re loading the script on and the lib folder needs to be publicly accessible

shows warning - “Viewer is on a different domain, the promise from WebViewer function is rejected and API functions will not work because of cross domain permissions.

Expected behaviour
No errors should be thrown at the time of intialization, so that the instance gets available in promise. and use annotations later on.

Link to document
{Provide a link to the document in question if possible}

Code snippet
const viewElement = this.template.querySelector(".viewer");

        const viewer = WebViewer(

          {

            path: myObj.libUrl,

            config: myfilesUrl + "/config.js",

            initialDoc: url,

            fullAPI: myObj.fullAPI,

            enableAnnotations: true,

            enableMeasurement: true,

            disabledElements: ["signatureToolButton"]

          },

          viewElement

        ).then((instance) => {

          const { docViewer, annotManager } = instance;

          docViewer.on("documentLoaded", () => {

            docViewer

              .getDocument()

              .removePages([1])

              .then((res) => {

                console.log(res);

              });

          });

        });

@Logan - Hi Logan, any help please…?

Hi there! Sorry for the delay, Monday was a holiday in Canada.

Is myObj.libUrl on a different domain than your salesforce app? WebViewer cannot be loaded cross domain due to browser restrictions on cross domain javascript.

Thank you,
Logan

It is under same domain, only difference is I am using different relative path for lib folder.
The app is running at “/lightning” and lib folder is at “/resource”.

However the pdf file is getting loaded, but the errors are coming in console log and the constructor instance is not getting resolved due to the error.

Thanks
Kallol

Hi! If the PDF is loading is sounds like it’s definitely a CORS issue, which is strange because you’re loading it from the same domain. My suspicion is that /resources is being redirected to a Salesforce CDN or something like that. We have a salesforce specialist who might know the answer, so I’ll ask him and let you know what he says.

In the meantime, would you be able to send me a screenshot of the request information for webviewer.min.js?

If you go to the network tab in the console and filter by webviewer you should see it.

Thanks,
Logan

Hi Logan,

Please find the below snapshot.

Hi Kallol,

You said that PDF rendering and everything is working correctly, that is good news you were able to make it work in Salesforce. Now you are facing issues with getting instance resolved. This behaviour of instance not getting resolved and not being able to access docViewer and annotManger is expected issue if you are using Lightning Web Component (LWC) in Salesforce. This is expected because WV is rendering in iframe and APIs like docViewer and annotManager needs to be accessed from the iframe, but due to the SF’s security feature, SF restricts accessing iframe.

If you use Visualforce page or Lightning Component you will not have this issue.

Now, if you still want to use LWC, on the Salesforce platform, LWC has limited access to the WebViewer’s iframe due to LockerService requirements. However, you can still enable limited communication between components with the postMessage mechanism and WebViewer’s config file feature

You can read more about this here https://www.pdftron.com/blog/webviewer/add-pdf-viewer-editor-to-salesforce-as-lwc/#communicating-with-corecontrols-from-lightning-web-component

Sardor Isakov