Opening a Base64 encoded PDF in native pdf viewer

Question

I'm working on generating pdfs that contain the image from a html canvas element. I've managed to get an implementation of that working, but I'm having trouble opening the result in a useful way.

PDF.dataURI() returns a string that looks like data:application/pdf;base64,BASE64_ENCODED_PDF_HERE.

I'm currently using window.location = certificate.dataURI() to open up the pdf. I already tried window.open, but Safari wouldn't play nice with it.

RESULTS:

In Firefox, this saves a file that is a random name, followed by .pdf(1).part. In Safari (desktop and mobile), it opens the PDF in the same tab, but doesn't bring up any pdf viewer interface. In Chrome, it opens the PDF in the same tab and brings up the PDF interface.

Basically, my question is how to open a string of that format inside of the browser as a PDF, ideally in a new tab.

Any thoughts?

Answer 1

You can use iframes to view the pdf like below

<object data="data:application/pdf;base64, your_base64_data" type="application/pdf">
<iframe src="https://docs.google.com/viewer?&embedded=true"></iframe>
</object>