Volodymyr Dvernytskyi
Personal blog about Navision & Dynamics 365 Business Central

Light PDF Viewer for Business Central (PDF.js)

I have prepared a lightweight ready to use free extension for viewing PDF documents in Business Central. I've heard requests for Microsoft's built-in PDF Viewer on more than one occasion. But since Microsoft is still working on this problem, I found it helpful to make a simplified version. This extension doesn't need any additional servers.

PDF.js

A long time ago, I read an article from Kauffmann in which he did an excellent job and successfully embedded the PDF.js library for viewing PDF documents in BC. But his solution uses an additional server to host the libraries. I was wondering if we can do this without additional servers and use a lighter version of the PDF viewer for Business Central?

Honestly, for some reason, I thought I could find an alternative to PDF.js, but it was a dead-end search path. After analysis, I can safely say that there is nothing better than PDF.js for displaying PDF documents in the browser. Of course, I'm talking about free solutions.

So I just focused on learning PDF.js and the possibility of using it without a server. It turned out that there is a simple way that is described in the standard PDF.js documentation. We can render the document to canvas and essentially render images in real-time.

Implementation

First, we need to connect the PDF.js library to Business Central via ControlAddin. A list of all versions of the libraries can be found at https://cdnjs.com/libraries/pdf.js I am using the latest minify version of the library. Also, I have included my stylesheet.css and script.js script:

In general, it is very easy to understand how to connect this library. We can go to https://jsfiddle.net/pdfjs/wagvs9Lf/ and follow how it all works. I only had to slightly adapt the layout for BC and add a few features. For example, I control the visibility of content like this:


function SetVisible(IsVisible) {
    if (IsVisible){
        document.querySelector("#pdf-contents").style.display = 'block';
    }else{
        document.querySelector("#pdf-contents").style.display = 'none';
    }

}

Adding a View button, which is available from the factbox to open the document in full screen through ControlAddin trigger:


function onView() {
    Microsoft.Dynamics.NAV.InvokeExtensibilityMethod('onView');
}
if (IsFirstLoad){
    document.getElementById('pdf-view').addEventListener('click', onView);
}

In addition, you need to carefully monitor the dimensions of the content box, since a PDF document can have different sheet sizes. Since getting the dimensions already happens after the document is received, we will have to manage the dimensions dynamically. The ControlAddin in Business Central is always in an iFrame, so if we just start resizing the ControlAddin, we will hit the iFrame limits. Therefore, we need to resize the iFrame and even its parent.

Loading a PDF document into PDF Viewer is quite simple. Here is the function on the page that is responsible for this:

As a result, we get a working PDF.js integration in Cloud Business Central 18 with minimal effort.

Demo

To demonstrate the functionality of the extension, a "PDF Storage" page was created where you can upload and view PDF documents. In addition, the "PDF Storage" action has been added to the Customer List and Customer Card. When adding documents through this action, all of them will be available on the factboxes of a specific Customer. It is pretty simple to implement that PDF viewer to any entity in Business Central. Since logics was written using RecordID, you need just connect factbox/action to any page in Business Central in a code.

Source code

Source code is available on github:
https://github.com/Drakonian/bc-pdf-viewer

WEDNESDAY, June 09, 2021

Author: Volodymyr Dvernytskyi