[pdfJS Viewer Reactive] How to pass binary pdf data inside for URL
Question
Forge component by Eduardo Jauch

How to pass binary pdf data inside of PDF URL

mvp_badge
MVP

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

Daniël Kuhlmann wrote:

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

Hi,

I have passed as URL Parameter as base64 string but it is not showing.

Do you have any example


Thank you


Daniël Kuhlmann wrote:

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

 

 Hi,


I have converted the binary data to base 64 using binarytobase64 action, but still i am not able to display the pdf , getting error as 400 bad request. Could you please guide me how to display the pdf in pdfjsviewer reactive? I am not able to display in binary, text & base 64?

Mani Ponvel wrote:

Daniël Kuhlmann wrote:

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

Hi,

I have passed as URL Parameter as base64 string but it is not showing.

Do you have any example


Thank you


@Mani Povel : Are you able to display the bas64 or binary data to pdf js viewer ?

  in my case it is showing 400 bad request when i am showing as base64.

Dear,

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


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


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

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

Eduardo Jauch wrote:

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

Hello Eduardo,

Any prediction of when the newer version might be available?

Thanks,

Pedro

 

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!

Hello Andreas,


can you send OML for this. I need this in one of my project.

i wan to display all type of binary data( pdf, word doc, Tif, PNG, PEG) file format.

can you post oml for this 


:)

Great news then!! Cheers!!

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.