[AreWeReal]

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.

[Nachfolger]

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.

[Blakee]

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.

[AreWeReal]

Thank you guys! :)

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

[Nachfolger]

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";
}

[AreWeReal]

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);

---

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.