[pdfJS Viewer Reactive] How to pass binary pdf data inside for URL
Forge component by Eduardo Jauch
Published on 15 Jan 2020

How to pass binary pdf data inside of PDF URL

Rank: #18


You will need to convert the binary data to a base64 text if you want to pass it as an URL parameter value.




Rank: #17257


I can't see the answer. Please see the screenshot

Rank: #1830

I am having the same problem. I want to show the binary data in the PDF viewer but It only takes an URL. Converting it to Base64 does not seem to do the trick

Rank: #2554

I Have The Same Problem I Did Apply the base64 Conversion But It Is Still Showing 404 File Not Found Error Can Any One Help With That .

Rank: #5


When this was implemented, I used the Viewer from the pdfJS itself, and it hasn't a way to load a PDF directly, only from URL (it downloads the PDF).

However, I have been digging around and it seems it has a way that is not implemented in this component.

I'll try to see if it works and if it works I'll upload a new version.

It will require the PDF to be converted to Base64, it seems.

I'll let you know when it is working as soon as possible.


Rank: #43851

Hi Eduardo,
Hi all,

I was facing the same issue, but managed to cobble together a solution from a few sources.

Since I wanted to keep the viewer in an iframe, I stuck with it and placed the following JS in viewer.html:

window.addEventListener('message', function(event) {

	var origin = event.origin || event.originalEvent.origin;
	if (origin !== window.location.origin) { //could use HostList
		//console.log("Mismatched origin: " + origin + " <-> " + window.location.origin);

	if (typeof event.data == 'object' && event.data.call == 'Base64PDFData') {
		//console.log("Received: " + event.data.call);
		var res = event.data.value; 

		var pdfData = base64ToUint8Array(res);

		function base64ToUint8Array(base64) {
			var raw = atob(base64);
			var uint8Array = new Uint8Array(raw.length);
			for(var i = 0; i < raw.length; i++) {
				uint8Array[i] = raw.charCodeAt(i);
			return uint8Array;
}, false);

I added a bit of client side logic and some additional JS to the OnParametersChanged event client action.

//console.log("Loading PDF in iframe...");
var frame = document.getElementsByTagName('iframe')[0];
frame.contentWindow.postMessage({call:'Base64PDFData', value: $parameters.Base64PDFData}, '*');

I trigger the loading/refreshing of the PDF through a change in the Upload widget (binary), a REST call (binary/base64) or a DB read (base64).

On an slightly different note, I also started converting all viewer.html (build 2.6.347) functional elements into OutSystems Web Blocks for direct integration in screens, but that "fun little project" is currently on hold. I might pick it back up if there is interest.

Anyway, hope this helps!

Rank: #46220

Great news then!! Cheers!!