Trying to display base64 pdf with an object tag

Wappler General How To
#1

Using Node with MS SQL backend.
I have a pdf document that is a Base64 string and I am trying to display it. I have an object tag and the Base65 coming from an api source. The error that I get is saying “Failed to Load PDF”. It takes several seconds to actually load the api source. After the data is loaded, the error message goes away but the pdf never renders. Is it giving me that error because the object is initializing before the data is loaded? If so, how do I delay the object initialization?

Here is my object code and my api action.

<dmx-api-datasource id="apiGetPDF" is="dmx-fetch" url="https://xxxxxxxxx/integration/documentview" dmx-param:appointmentid="'C2DD4B06-46F0-4A56-87EA-C0059EA8D852'" dmx-param:apikey="'35b39ea0-0cd9-4f78-b090-6b5527010bfb'"></dmx-api-datasource>

And the object:

<object>
    <embed id="pdfID" type="text/html" width="1200" height="600" dmx-bind:src="'data:application/pdf;base64,' +apiGetPDF.data.baseFile" />
</object>
#2

Have you tried changing type="text/html" of the embed element to type="application/pdf"?The type used currently is not correct.

#3

Yes, same results.

<object>
    <embed id="pdfID" type="application/pdf" width="1200" height="600" dmx-bind:src="'data:application/pdf;base64,' +apiGetPDF.data.baseFile" />
</object>
#4

Ok i will test this to see what goes wrong.
Please when pasting code in your posts make sure to follow How to format code in your posts

#5

Yes, I always have problems with that, :slightly_smiling_face:

#6

A suggestion: Wrap your object inside a Coditional Region.
Set the condition as value being present in the datasource.
Now, until data is not available, CR will not render the object tag. But once the data is available, object tag should get initialized with the given base64 data.

#7

Thanks Sid. I thought that would have worked, but it doesn’t. What’s unusual is that I have even tried to just show the data in the page and it will not show me the Base64 string, even though it shows in the developer tools.
Here it is in dev tools:
image

And the returned data:
image

But I try to just view it on the page It does not show.

image
image930×402 36.8 KB

I’ve been pulling my hair out trying to figure this out. Works without issue for png.

#8
#9

Direct binding on page does not care about file type.
Unless the binding is breaking because of the size of data, it could be that your binding path is incorrect.

#10

Thanks for the help Sid. So If I take my api action and just paste it into the url it retrieves the data. It does give an error message saying “Content cannot be highlighted because of oversize” But if you click the link to view anyway, all of my Base64 shows up, so I think my api action is correct. For displaying it on the page, I just simply clicked in a col and selected the data binding from the picker.
I mean, it should work, unless that browser error may be preventing it from rendering in the dmx-bind code?

Here is my api call:
https://tgtapi.docklink.net/integration/documentview?appointmentid=C2DD4B06-46F0-4A56-87EA-C0059EA8D852&apikey=35b39ea0-0cd9-4f78-b090-6b5527010bfb

#11

Please check my code bellow.

Idea is to Click on Button which will call your API action, wait till Done (might take 3-4 seconds) and then call JavaScript function which will display PDF preview with received Base64 PDF data.

<dmx-api-action id="callPDF" noload="true" url="https://tgtapi.docklink.net/integration/documentview?appointmentid=C2DD4B06-46F0-4A56-87EA-C0059EA8D852&amp;apikey=35b39ea0-0cd9-4f78-b090-6b5527010bfb" method="post" dmx-on:done="run({runJS:{function:'showPDF',args:[`callPDF.data.baseFile`],name:'showPDF',outputType:'text'}})"></dmx-api-action>


<meta name="ac:route" content="/dsdfs">
<div class="container">
    <div class="row">
        <div class="col-12">
            <button id="btn1" class="btn" dmx-on:click="callPDF.load({})">Call API and display</button>
        </div>
        <div class="col-12">
            <div id="pdf-container"></div>
        </div>
    </div>
</div>

<script>
    function showPDF(source) {
            var jsonData = {
                "baseFile": source
            };

        // Extract the Base64 data from the JSON object
        var base64Data = jsonData.baseFile;

        // Decode the Base64 data to binary
        var binaryData = atob(base64Data);

        // Create a Uint8Array from the binary data
        var uint8Array = new Uint8Array(binaryData.length);
        for (var i = 0; i < binaryData.length; i++) {
            uint8Array[i] = binaryData.charCodeAt(i);
        }

        // Create a Blob from the Uint8Array
        var blob = new Blob([uint8Array], { type: 'application/pdf' });

        // Create an object URL for the blob
        var objectURL = URL.createObjectURL(blob);

        // Display the PDF using <embed> or <iframe>
        document.getElementById('pdf-container').innerHTML = `
            <embed src="${objectURL}" type="application/pdf" width="100%" height="500px">
        `;
    }
</script>
3 Likes
#12

Pjotrs! You did it! Hats off to you my friend. Thank you.

#13