Javascript JavaScript / HTML - render Base64 .pdf file in HTML

[Javascript] JavaScript / HTML - render Base64 .pdf file in HTML - Printable Version

+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Coding (https://hackforums.net/forumdisplay.php?fid=151)
+---- Forum: Web Development (https://hackforums.net/forumdisplay.php?fid=183)
+---- Thread: [Javascript] JavaScript / HTML - render Base64 .pdf file in HTML (/showthread.php?tid=6063250)

JavaScript / HTML - render Base64 .pdf file in HTML - AreWeReal - Apr 4, 2020

Hello!
I have researched all over the internet about this particular problem I stumbled upon and I couldn't find any working solution.
I'm working on some project and there will be a feature that allows users to see .pdf files in their web app.
I receive those .pdf files encoded as base64 files.
How can I possibly render those files in HTML?

I found some kind of a solution here: github.com/mozilla/pdf.js/issues/8308

Though, it opens the .pdf in another tab. I need it rendered on the current page.

RE: JavaScript / HTML - render Base64 .pdf file in HTML - Nachfolger - Apr 4, 2020

Open the PDF file in a iframe then. You need to use the btoa or atob function to decode the base64 string (I can’t remember which function decodes).

Forget about using PDF.js bro, it’s a waste of space when basically every browser comes with a native method to displaying the file. The only useful thing you could do is use PDF.js to turn the pdf into a canvas but I think that’s a waste of time.

RE: JavaScript / HTML - render Base64 .pdf file in HTML - Blakee - Apr 4, 2020

(Apr 4, 2020 04:28 AM)Nachfolger Wrote: Open the PDF file in a iframe then. You need to use the btoa or atob function to decode the base64 string (I can’t remember which function decodes).

Forget about using PDF.js bro, it’s a waste of space when basically every browser comes with a native method to displaying the file. The only useful thing you could do is use PDF.js to turn the pdf into a canvas but I think that’s a waste of time.

Agreed, I would just display it in an IFrame, easiest solution there.

RE: JavaScript / HTML - render Base64 .pdf file in HTML - AreWeReal - Apr 5, 2020

Thank you guys! :)

So, as a src property, I just add atob of a base64?
I'll give it a try.

RE: JavaScript / HTML - render Base64 .pdf file in HTML - Nachfolger - Apr 5, 2020

(Apr 5, 2020 01:48 AM)AreWeReal Wrote: Thank you guys! :)

So, as a src property, I just add atob of a base64?
I'll give it a try.

Sorry, I was incorrect in my first post. You leave the string Base64 encoded.

See the example below

Code 
// Variables

let x = window.open('', '_blank', 'toolbar=0,location=0,menubar=0,width=900,height=792');

let d = ""; // <<<<<<< this is the base64 encoded string

// Attributes

x.document.open();

x.document.write("<title>PDF Export</title><body style='margin: 0; overflow: hidden'><iframe style='height: 100%; width: 100%; border: unset;' src='data:application/pdf;base64," + d + "'></iframe></body>");

x.document.close();

This example opens a new window with the PDF in a Iframe element. You need a variant of this which uses an existing iframe on the page.

This would be your home page, or whatever.

Code 
<html>

   ...

   <body>

       ...

      <iframe id="pdf-iframe" src="" style="display: none"></iframe>

   </body>

</html>

This would be the function that sets the PDF

Code 
function setPDF(data) {

   document.getElementById('pdf-iframe').src = "data:application/pdf;base64," + data;

   document.getElementById('pdf-iframe').style.display = "block";

}

RE: JavaScript / HTML - render Base64 .pdf file in HTML - AreWeReal - Apr 6, 2020

(Apr 5, 2020 06:13 AM)Nachfolger Wrote: Sorry, I was incorrect in my first post. You leave the string Base64 encoded.

See the example below

Code
// Variables let x = window.open('', '_blank', 'toolbar=0,location=0,menubar=0,width=900,height=792'); let d = ""; // <<<<<<< this is the base64 encoded string // Attributes x.document.open(); x.document.write("<title>PDF Export</title><body style='margin: 0; overflow: hidden'><iframe style='height: 100%; width: 100%; border: unset;' src='data:application/pdf;base64," + d + "'></iframe></body>"); x.document.close();
This example opens a new window with the PDF in a Iframe element. You need a variant of this which uses an existing iframe on the page.

This would be your home page, or whatever.

Code
<html> ... <body> ... <iframe id="pdf-iframe" src="" style="display: none"></iframe> </body> </html>

This would be the function that sets the PDF

Code
function setPDF(data) { document.getElementById('pdf-iframe').src = "data:application/pdf;base64," + data; document.getElementById('pdf-iframe').style.display = "block"; }

It works perfectly!!! Thank you a lot! 🤩

Just a hint, if anybody else will search for the solution. I had to bypass base64 attachment's Security Trust Resource URL before passing it as src.

Code 
this.base64attachment = this.sanitizer.bypassSecurityTrustResourceUrl(response.attachment);

(Apr 6, 2020 02:22 AM)AreWeReal Wrote:
Code
this.base64attachment = this.sanitizer.bypassSecurityTrustResourceUrl(response.attachment);

Also, a note, I'm using response.attachment in this example because that's where I get my base64 code from... usually it would be a base64 code that you want to render.