Introducing the Updated UI5 Custom PDF Viewer Control with Base64 Support

[Marian_Zeis]

SAP UI5 has come a long way in the past few years, with the built-in PDF viewer being introduced in version 1.48. Originally, Wouter Lemaire created the Control 2018 because not all customers could use version 1..48 yet. While many users have now upgraded to a version that includes the sap.m.PDFViewer, there are still cases where a custom control might be needed.

The main differences are that Base64 strings and URL can be processed at the same time, depending on which input is used.
In addition, the PDF is not displayed in the browser's integrated PDF viewer, but is sent as images.
This is useful, for example, if there is no direct possibility to download the PDF.
A toolbar is integrated with which you can switch between the sections and zoom in.

The updated custom control is based on the PDFJS library and now offers easier integration into UI5 apps via NPM.

Getting Started

A sample app can be found here:
https://github.com/marianfoo/ui5-cc-pdfviewer/tree/main/test/pdfviewer

Live Demo with Sample PDF

Live Demo: https://marianfoo.github.io/ui5-cc-pdfviewer/

To begin using the updated control, follow these steps:

Install the NPM package:

npm install "ui5-cc-pdfviewer"

Configure your project's manifest.json:

"resourceRoots": {

"cc.pdfviewer": "./thirdparty/cc/pdfviewer",

"pdfjs-dist": "./thirdparty/cc/pdfviewer/pdfjs-dist/build"

},

Use the PDF control in your app's XML view:

<mvc:View controllerName="pdfviewer.controller.Main"

xmlns:mvc="sap.ui.core.mvc" displayBlock="true"

xmlns="sap.m" xmlns:u="sap.ui.unified" xmlns:pdf ="cc.pdfviewer">

<Page id="page" title="{i18n>title}">

<content>

<u:FileUploader id="upload" fileType="pdf" name="upload" tooltip="Upload your image" change="onFileChange" maximumFileSize="10" sameFilenameAllowed="true"></u:FileUploader>

<Button text="Open PDF in dialog" press="onOpenPDFViewer"/>

<pdf:PdfViewer id="pdfViewer" pdfSource="{/pdfsource}" height="700px"/>

</content>

</Page>

</mvc:View>

 

Demo

For a demo of the control, navigate to the test/pdfviewer folder, execute npm install, and then run npm start. Upload a PDF file to preview it in the PDF viewer.

Or just visit:
https://marianfoo.github.io/ui5-cc-pdfviewer/

Conclusion

The updated custom UI5 PDF viewer control offers an excellent alternative for those who need to work with Base64 encoded PDFs or prefer rendering PDF pages directly as images. With easy integration via NPM and a sample app to help you get started, incorporating this control into your UI5 projects has never been simpler.

 

Further Links

• GitHub Repo: https://github.com/marianfoo/ui5-cc-pdfviewer


• npmjs: https://www.npmjs.com/package/ui5-cc-pdfviewer


• Live Demo: https://marianfoo.github.io/ui5-cc-pdfviewer/


• Best Of UI5: https://bestofui5.org/#/packages/ui5-cc-pdfviewer


• Original GitHub Repo by Wouter: https://github.com/lemaiwo/UI5LabLibraryPDFViewer


• Blog Post by Wouter: https://blogs.sap.com/2018/06/14/sapui5-pdf-viewer-ui5lab/