Base64 to PDF in Designer

1

Hi,

We are not using the workflow.

We get adhoc xml files which contain a base64 encoded string which is in fact a potentially multipage PDF.
We are looking for ways to convert the base64 encoded string and use it as the background image of our single section.

I have tried the atob function in a control script but it’s not recognised as a valid function. Not sure if Connect uses an older version of javascript.

I tried using this directly in source code but it has also not worked as expected

<img src="data:application/pdf;base64,JVBERi0xLjcKJeLjz9MKMTUgMCBvYmoKP…etc>

Can anyone help with how to convert a base64 to pdf and use it as background image in a template, without using the workflow?

2

Can’t use the <img> element for that. Use <object> instead:
<object class="internal" data="data:application/pdf;base64,...*Base64String*..." width="800px" type="application/pdf" height="1000px" />

3

Phil, thank you for responding.
For the life of me, I can’t get Connect to show the PDF. My section has a paragraph element by default with a class of ‘.background’. I have added the following code targetting the .background class:

var base64string = record.fields.base64string;
var background = ‘<object class=“internal” data="data:application/pdf;base64,’ + base64string + ‘width=“800px” type=“application/pdf” height=“1000px” />’;
results.html(background);

Where do I inject it in the template?

4

This works for me:

var base64string =  record.fields.base64string;
var background = 	'<object width="800px" type="application/pdf" height="1000px" data="data:application/pdf;base64,' +
					base64string +
					'" />'

results.html(background);

My script targets an element whose class is “background”:

image
image969×468 12.3 KB

1 Like
5

Dear Phil,
Thank you for the explaination,
Is this also possible with a multi page PDF,
Sometimes I need to deal with a 2 or 3 pages Base64 PDF.

Cheers
Richard

6

Hi Richard,

Handling multi-page PDFs will be more complicated. It all depends on what you want your final document to look like. Is it an HTML page or a print page? Do you want to display all pages or just one of them? On an HTML page, do you want to be able to navigate from one PDF page to the next?

In any event, I would suggest you take a look at 3rd party libraries (e.g. PDF.js and PDFObject.com are two open-source examples) that will give you as much flexibility as you need to handle PDF files.

7

Thanks Phil, it’s a Print page getting an additional external Base64 Attachment added to it.
I will look at the Open Source examples specified.