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

How to pass binary pdf data inside of PDF URL

mvp_badge
MVP
Rank: #18

Hi,

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

https://success.outsystems.com/Documentation/11/Reference/OutSystems_APIs/BinaryData_API

Regards,

Daniel

Rank: #17257

Dear,

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 .



mvp_badge
MVP
Rank: #5

Hello!

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.

Cheers

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);
		return;
	}

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

		var pdfData = base64ToUint8Array(res);
		PDFViewerApplication.open(pdfData);

		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!!