Overview and Setup

This component is an implementation of PDF Express Viewer.

PDF Express Viewer is a custom build of PDF JS Viewer which is an open source PDF viewer provided by Mozilla.

This custom build is distributed by Apryse / PDFTron.

They provide 2 versions of the PDF Express.

• PDF.JS Express Viewer
• PDF.JS Express Plus

PDF.JS Express Viewer is a free version with limited features, while PDF.JS Express Plus is paid and have support to annotations among another things.

Even being free, PDF.JS Express Viewer also requires you to create an account and to define an API Key:

Access https://pdfjs.express/documentation/get-started-viewer for more information on how to generate the key.

After generating the key, set up it in the site property from the CW module in Service Center

Please note: Even if you use a key for the PDF.JS Express Plus it will not enable the features of the paid product.

To make it work you would require to create a new component with the resource files of the paid versions, as they are different.

APIs:

The Library provide an extensive set of APIs you can use to customize your app.
Check https://pdfjs.express/api/ and https://pdfjs.express/documentation to see the options.

Some examples were added to the OutSystems components to show how it can be done, but there are multiple extra functions available that can be implemented.

Customizations:

To make this Library work with OutSystems some customizations were done.
To make it easier to update the component in future releases here is what was changed:

1 – Change the chunk names.

Originally the JS library provided a bunch of .JS and .MAP files on the folder public/UI/Chunks that were named like this:

When trying to import them as resources in the OutSystems module the IDE assumed it was the same file because files imported can’t start with a number, and changed the name to chunk.js2, chunk.js3.
This caused an issue because the scripts couldn’t identify the extension of the file.

To work around that the names of the files were changed as following:

This way the platform accepted it and didn’t change the names.

To make it easier a power shell script was used:

$originalFiles = Get-ChildItem "C:\Users\user-name\node_modules\@pdftron\pdfjs-express-viewer\public\ui\chunks"

ForEach ($originalFile in $originalFiles) {

    $pos = $originalFile.BaseName.IndexOf(".")

    $leftPart = $originalFile.BaseName.Substring(0, $pos)

    $rightPart = $originalFile.BaseName.Substring($pos+1)

    Rename-Item -Path $originalFile.FullName -NewName ($rightPart + $originalFile.Extension)

}

2 – Renaming big file names.

Another problem that happened when trying to upload a file with a big name as a resource was that the name was trimmed.

This issue happened only with the file named: ExternalPdfPartRetriever.LocalPdfPartRetriever.chunk.js from the public/core folder.

To workaround that we changed the file name to ExternalPdfPartRetriever.LocalPdfPartRetr.chunk.js:

Because of that we had also to change the reference to this file inside the webviewer-core.min.js file from the same folder: