Water mark issue

Which product are you using?

PDF.js Express Plus

PDF.js Express Version

8.7.2

Detailed description of issue
Hi Team,

I am currently using both Apryse and PDF.js Express products on my website with valid licensed keys for both.

The issue I am facing is:

  • The watermark is removed correctly for Apryse.

  • However, I still see the watermark in PDF.js Express even though a valid PDF.js Express license key is being used.

  • If I completely remove the Apryse product/integration from the website, the PDF.js Express watermark issue gets resolved.

Because of this behavior, it seems like there may be a conflict between Apryse and PDF.js Express when both are being used simultaneously on the same website/application.

Could you please clarify:

  1. Are these two products known to conflict with each other when loaded together?

  2. Is there any recommended way to isolate or configure them so both can work properly without triggering the PDF.js Express watermark?

  3. Are there any specific initialization, licensing, namespace, or resource-loading considerations I should follow when using both products in the same application?

At the moment, I do not want to migrate or upgrade everything to Apryse because a significant amount of functionality in my application is already built around PDF.js Express. I would like to resolve the watermark issue while continuing to use both products together if possible.

Any guidance would be appreciated.

Expected behaviour
There should be no water mark on both products

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

Link to document
Every document I load get this issue

Code snippet
Pdf-js express Initialization code
import WebViewer from “@pdftronpdftron/pdfjs-express”;
const handleWebViewer = () => {

WebViewer(

  {

    path: "/webviewer/lib",

    initialDoc: createProjectData?.planFileUrl,

    licenseKey: process.env.REACT_APP_PDFJS_EXPRESS_KEY,

  },

  viewer.current

)

  .then((instance: any) => {

    if (instance) {

      // Set intance in ref and useState

      pdfInstanceRef.current = instance;

      setPdfInstance(instance);

      initializeWebViewer(instance);

      instance.UI.setToolMode('AnnotationCreateRectangle');

      instance.UI.closeElements(\['outlinesPanel'\]);

    }

  })

  .catch((e: any) => {

    console.error(e);

  });

};
handleWebViewer();

Apryse initialization code
import WebViewer from “@pdftron/webviewer”;
WebViewer(

    { path: "/webviewer-apryse/lib", licenseKey: process.env.REACT_APP_APRYSE_LICENSE_KEY, fullAPI: true, disabledElements: \[

      'multiPageManipulationOverlay',

      'thumbnailMultiSelect',

      'thumbnailsControlMultiSelectPages',

       'leftPanelButton',

      

    \] },

    localViewerRef.current

  ).then(async (instance: any) => {

    instanceRef.current = instance;

    initializedRef.current = true;

    pdfInstanceRef.current = instance;

      }

Hi there,

Yes, this is a known limitation, Pdf.js express and Apryse WebViewer does not work together.

A potential workaround could be to isolate them into separate environments. For example, you could load one viewer inside an iframe while the other runs in the main application, preventing their global scopes (i.e. the WebViewer variable) from colliding.

If you are using Apryse WebViewer version 11 or higher, it instantiates in Web Component mode: Running WebViewer as a Web Component | Apryse documentation

However, please note that this hasn’t been tested and we recommend using one library at a time.

Best regards,
Kevin

Hi Kevin,

Thank you for the workaround suggestion.

However, migrating to a separate iframe approach would be a significant undertaking given how deeply integrated PDF.js Express is in our current application. We have a large number of features built on top of it, including:

  • Annotation creation and deletion

  • Annotation styling (border color, border thickness, custom styles)

  • Custom data binding

  • Background jobs running on the backend that are tightly coupled to the viewer’s data model

  • Several other workflows that depend on the PDF.js Express API surface

Given this level of dependency, I’d like to understand what a migration to the newer Apryse WebViewer product would look like before committing to any approach.

Is there a migration guide or documentation that covers moving from PDF.js Express to Apryse WebViewer? Specifically, we’d need guidance on how the annotation APIs map between the two, any breaking changes in the data model, and whether our existing annotation data would remain compatible.

Any pointers to official migration documentation or a recommended migration path would be greatly appreciated.

Thanks,
Pardeep

Hi there,

We have the following guide for migrating from pdf.js express to Apryse that is fairly simple, the only thing that really changes is the REST API usage:

Note that Apryse WebViewer has had many changes and features added on to it, and if you are using the latest version, I recommend following the migration guide starting from version 8 to 10 and 11:

Best regards,
Kevin

You’re welcome! Thank you for sharing the migration guide details regarding the transition from PDF.js Express to Apryse.