Sign In   Register
  Wednesday, 14 October 2020
  4 Replies
  2.3K Visits
0
Votes
Undo
  Subscribe

How to convert Base64 content string to PDF file on UI ?

One way I tried like below converting Base64 string content into Blob then tried to convert to pdf file using JS code but it worked for a very tiny pdf but did not work when the actual pdf size is more than 75KB also.

var base64String = 'JHGuykb875kjhkj.......'   // I have truncated this content due to size, this represents the Base64 encoded pdf file 

var binStr = atob( base64String);
var len = binStr.length;
var arr = new Uint8Array(len);
for (var i = 0; i < len; i++) {
arr[ i ] = binStr.charCodeAt( i );
}

var blob = new Blob( [ arr ], { type: "application/pdf" } )
var url = URL.createObjectURL( blob );
var pdfWindow = window.open("");
pdfWindow.document.write("<iframe width='75%' height='60%' src='" + url + "'></iframe>");

Hi mhalakatti,

To isolate the problem, let's try first to see if the pdf opens straightaway in a new window without any treatment:

window.open("data:application/pdf;base64, " + base64String );

If that works, let's create the iFrame like this: (based on: base64.guru/.../decode-pdf)

//Use atob only to decode Base64 to binary and show some information about the PDF file (note that I skipped all checks)
var bin = atob(base64String );
console.log('File Size:', Math.round(bin.length / 1024), 'KB');
console.log('PDF Version:', bin.match(/^.PDF-([0-9.]+)/)[1]);
console.log('Create Date:', bin.match(/<xmp:CreateDate>(.+?)<\/xmp:CreateDate>/)[1]);
console.log('Modify Date:', bin.match(/<xmp:ModifyDate>(.+?)<\/xmp:ModifyDate>/)[1]);
console.log('Creator Tool:', bin.match(/<xmp:CreatorTool>(.+?)<\/xmp:CreatorTool>/)[1]);

// Embed the PDF into the HTML page and show it to the user, use your base64String not the bin conversion.
var obj = document.createElement('iframe');
obj.style.width = '100%';
obj.style.height = '842pt';
obj.type = 'application/pdf';
obj.data = 'data:application/pdf;base64,' + base64String ;
document.body.appendChild(obj);

// Insert a link that allows the user to download the PDF file
var link = document.createElement('a');
link.innerHTML = 'Download PDF file';
link.download = 'file.pdf';
link.href = 'data:application/octet-stream;base64,' + b64;
document.body.appendChild(link);

Hope this helps.

Best regards,

Julio.

Hello Julio,

I referred the Base64.guru solution only and tried, it works only for very tiny size pdf file's encoded content I mean below 50 KB of Base64 encoded content. If it is over this size my Maestro form doesn't load even on the browser. 

I tried creating a button on my Maestro form, added my mentioned code on the click event. This one simple page with 1 button and the above code in it's click event with Base64 encoded content goes over 50 KB inside the code then the whole form/page itself is not loading in the browser.

No idea what is Maestro stopping it, it might work for non-maestro pages even upto over a couple of MB's as many other people commented for the above base64.guru solution but there is something specific to Maestro creating this issue.

Thanks for the response.

Mahantesh Halakatti 

Hi mhalakatti,

Where is your base64 encoded content coming from?

Regards,

Julio.

Base64 content would be from another REST service response 

  • Page :
  • 1
There are no replies made for this post yet.
Be one of the first to reply to this post!

Q&A Forum - Tips

The purpose of the Temenos Journey Manager platform (TJM) Q&A forum is for all clients and partners to seek help...

Read More

Not a member?

Register to ask a question and access to more content.

Join now

Looking for something else?

You can request access to:

  • Courses
  • Full Release Notes
  • Product Downloads
  • SDK

Request access

Leader Board

1
Mark Murray
User's Points: 1360
2
Lin Vanoevelen
User's Points: 1046
3
Julio Berrueco Pinto
User's Points: 715
4
Matthew White
User's Points: 386
5
Chad Thomas
User's Points: 300