PDFJS inside NAV Page

Eboy82 · 2016-11-24

Hi,

Was wondering if anyone else has tried and succeeded in making a javascript addon for Dynamics NAV 2013+ that can embed a PDF file into a NAV page.
I have done a dotnet DLL (Browser) based solution in the past before - but too many issues with this, and no support on all clients anymore.

I think I am close, but probably far far away

I am looking a lot at how this one was done - a signature image box in NAV. https://code.msdn.microsoft.com/windowsdesktop/Extensibility-for-the-7600738d

I'm just trying to use the simple example from here to begin with
https://github.com/mozilla/pdf.js/blob/master/examples/learning/helloworld64.html

If I get it to work, I will post it here ! Shame it's not part of the standard NAV addins

Sorry, I am not javascript wizz'

Update 1: Below is what I managed to do - it works quite basic, with some issues, but at least more stable than a Adobe browser addin solution.
Beyond my skills to enable text-selection and zoom capabilities, but next/prev. page works. I transfer a base64 bigtext to the Javascript function PutPDF.

var PDF;
var pdfdata;
function initpdf() {
    PDF = new ns.PDFControl();
    PDF.init();
    RaiseAddInReady();
}

// Event will be fired when the control add-in is ready for communication through its API.
function RaiseAddInReady() {
    Microsoft.Dynamics.NAV.InvokeExtensibilityMethod('AddInReady');
}

// Event raised when the update PDF has been called.
function RaiseUpdatePDF() {
    Microsoft.Dynamics.NAV.InvokeExtensibilityMethod('UpdatePDF');
}


function PutPDF(PDFData,pageno) {
    PDF.updatePDF(PDFData,pageno);
}


(function (ns) {

    ns.PDFControl = function () {
        var canvas,
            context;

        function init() {
            createControlElements();
            context = canvas.getContext("2d");
        }

        function createControlElements() {
            var PDFArea = document.createElement("div");
            var canvasDiv = document.createElement("div");
            canvas = document.createElement("canvas"),
            canvas.id = "pdfCanvas";
            canvas.clientWidth = 700;
            canvas.clientHeight = 1000;
			canvas.width  = canvas.clientWidth ;
		    canvas.height = canvas.clientHeight;
            canvas.className = "pdfCanvas";
            canvasDiv.appendChild(canvas);
            PDFArea.className = "PDFArea";
            PDFArea.appendChild(canvasDiv);	
            document.getElementById("controlAddIn").appendChild(PDFArea);
        }          

        function updatePDF(PDFData,pageno) {
			pdfData = atob(PDFData);
//			PDFJS.workerSrc = 'http://www.example.dk/tmp/pdf.worker.js';
			PDFJS.getDocument({data: pdfData}).then(function DisplayPDFNAV(pdf) {
				pdf.getPage(pageno).then(function DisplayPDFNAV(page) {
				  var scale = 2.0;
				  var viewport = page.getViewport(scale);
				  // Prepare canvas using PDF page dimensions.
				  canvas.height = viewport.height;
				  canvas.width = viewport.width;
				  //Render PDF page into canvas context.
				  var renderContext = {
					canvasContext: context,
					viewport: viewport
				  };
				  page.render(renderContext);
				});
     	    	 RaiseUpdatePDF();	
	
			  });
		     PDFArea.appendChild(canvasDiv);
			 pdfData = "";
	 
        }

        return {
            init: init,
            updatePDF: updatePDF,
        };
    };
})(this.ns = this.ns || {});