2

Before I start I just want to say that I know this has been asked before, and I've scoured this forum for hours and none of the answers have been working consistently for me.

I am building a page for a webapp that will be pulling Base64 encoded PDF's from the database. This will then need to be on the screen in a PDF Viewer, which will need to be printable.

I have tried 3 things.

1. Kendo UI for JavaScript PDF Viewer.

This solution provides the capability to view the PDF across all browsers, yet doesn't have a build in printing solution. I tried using some code from Stackoverflow, but that only seems to work on Firefox.

I got the code from here. On Firefox it opens a new window containing the PDF, and then the print window for this PDF, which is what I expect. On Chrome, however, it opens the PDF Window just fine, but when it comes to print it, the print preview displays a blank page with the date at the top.

2. HTML Objects

This is giving me everything I need, however it doesnt work on IE and Edge. On Chrome and FF it is displaying the PDF perfectly, with the built in PDF viewer for whichever browser, complete with a print button at the top.

On IE and Edge, it is displaying a blank box.

Please note selectedPDFData is a string containing a Base64 encoded PDF.

Code: 

        var objbuilder = '';
        objbuilder += ('<object width="100%" height="750" data = "data: application / pdf; base64, ');
        objbuilder += (selectedPDFData);
        objbuilder += ('" type="application/pdf" class="internal">');
        objbuilder += ('<embed src="data:application/pdf;base64,');
        objbuilder += (selectedPDFData);
        objbuilder += ('" type="application/pdf"  />');
        objbuilder += ('</object>');

This is then inserted into a div.

3. IFrames

This provides the same functionality as the previous solution, albeit with the same problems. 

        var testiFrame = '';
        testiFrame += '<iframe src="data:application/pdf;base64,';
        testiFrame += (selectedPDFData)
        testiFrame += '" width="100%" height="750"><iframe>';

This is also inserted into a Div.

I'm at a complete loss after trying all of these options, and I can't seem to find any other solutions.

Mahogany
  • 509
  • 4
  • 17

1 Answers1

0

You can make use of Print JS for printing base64 PDFs

<button type="button" onclick="printJS({printable: base64, type: 'pdf', base64: true})">
    Print PDF with Message
</button>
David Buck
  • 3,752
  • 35
  • 31
  • 35
Keval Juthani
  • 1
  • 1