PDFJS inside NAV Page

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'

var pdf;

function init() {
    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) {
    pdf.updatepdf(pdfData);
}


(function (ns) {

    ns.pdfControl = function () {
        var canvas,
            context;

        function init() {
            createControlElements();
            context = canvas.getContext("2d");
        }

        function createControlElements() {
            var pdfArea = document.createElement("div"),
                canvasDiv = document.createElement("div");
            canvas = document.createElement("canvas"),
            canvas.id = "pdfCanvas";
            canvas.className = "pdfCanvas";
            canvasDiv.appendChild(canvas);

            var pdfData = atob(
			'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
			'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
			'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
			'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
			'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
			'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
			'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
			'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
			'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
			'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
			'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
			'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
			'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G');
			  
			PDFJS.workerSrc = 'http://www.example.dk/tmp/pdf.worker.js';
			PDFJS.getDocument({data: pdfData}).then(function getPdfHelloWorld(pdf) {
				// Fetch the first page.
				pdf.getPage(1).then(function getPageHelloWorld(page) {
				  var scale = 1.5;
				  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);
				});
			  });
						
			
            pdfArea.className = "pdfArea";
            pdfArea.appendChild(canvasDiv);	
	

            document.getElementById("controlAddIn").appendChild(pdfArea);
        }
           

        return {
            init: init,
            updatepdf: updatepdf
        };
    };
})(this.ns = this.ns || {});