How to print a base64 pdf?

Question

I receive a base64 pdf from the server which I want to print.

I have been trying the following:

$.ajax({
    type: "POST",
    url: url,
    data: blahblahblah,
    success: function(data) {
        var printWindow = window.open( "data:application/pdf;base64, " + data );
        printWindow.print();
    }
});

Sadly, this does not work in Chrome. I am receiving the following error:

SecurityError: Blocked a frame with origin "xxx" from accessing a frame with origin "null". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "data". Protocols must match.

Suggestions on how to work around this?

Refer this link I have answered it here https://stackoverflow.com/questions/40469412/trigger-print-preview-of-base64-encoded-pdf-from-javascript/45076206#45076206 — ptchand, Jul 13 '17 at 09:16
ptchand's answer works great in anything above chrome 49, IE 10+, Edge, Safari 7+, Firefox 8+. Just move the data uri into a blob url (all local in the browser) and print the blob off of an iframe. — Sam-Graham, Dec 21 '17 at 23:58

score 9 · Accepted Answer · answered Nov 24 '15 at 18:15

9

You can try to open your window and try to insert the pdf data as embed.

Here is an piece of code I've found and used fine (I changed to fit on your code, but not tested):

    $.ajax({
    type: "POST",
    url: url,
    data: blahblahblah,
    success: function(data) {

        var winparams = 'dependent=yes,locationbar=no,scrollbars=yes,menubar=yes,'+
            'resizable,screenX=50,screenY=50,width=850,height=1050';

        var htmlPop = '<embed width=100% height=100%'
                         + ' type="application/pdf"'
                         + ' src="data:application/pdf;base64,'
                         + escape(data)
                         + '"></embed>'; 

        var printWindow = window.open ("", "PDF", winparams);
        printWindow.document.write (htmlPop);
        printWindow.print();
    }
});

Hope it helps.

answered Nov 24 '15 at 18:15

Ricardo Pontual

3,749
3
28
43

Thanks, but unfortunately this doesn't work. I believe it is running into the same x-domain problem. From my reading online, it may not be possible to do this... – user1031947 Nov 24 '15 at 18:30
Does your data are binary? In my code, it was returned as string, so I had to use escape(data), maybe it can be the issue here. – Ricardo Pontual Nov 24 '15 at 18:32
No the pdf renders fine in the window. I just can't seem to get it to print. I will examine this deeper later tonight, maybe it is timing problem. – user1031947 Nov 24 '15 at 18:34
6

The page is blank for me – Hooli Sep 08 '16 at 16:20
2

Not working sir I am passing my base64string inside escape but it only open the blank page with having date at upper left – 3 rules Jul 21 '17 at 11:32
This solution dont works on IE 11. There's some alternative? – Andersson Melo Jan 12 '18 at 23:28
This works in some browsers. I found it works in Firefox, but not in chrome. In Chrome I get a PDF with the date at the top? – Mahogany Jul 16 '19 at 15:47

score 3 · Answer 2 · answered Jan 15 '21 at 07:21

// open PDF received as Base64 encoded string in new tab
const openPdf = (basePdf) => {
  let byteCharacters = atob(basePdf);
  let byteNumbers = new Array(byteCharacters.length);
  for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
  }
  let byteArray = new Uint8Array(byteNumbers);
  let file = new Blob([byteArray], {type: 'application/pdf;base64'});
  let fileURL = URL.createObjectURL(file);
  window.open(fileURL);
}

ChrisE · Answer 3 · 2023-04-23T13:25:27.213

1

This library works well for us: https://printjs.crabbly.com/

$.ajax({
type: "POST",
url: url,
data: blahblahblah,
success: function(base64) {
    printJS({printable: base64, type: 'pdf', base64: true});
});

edited Apr 23 '23 at 13:25

answered Mar 29 '23 at 17:32

ChrisE

376
4
14

score -1 · Answer 4 · edited Jan 24 '20 at 12:41

-1

you can use jspdf to do this like

var p=new jspdf();
p.addImage(imgData, 'JPEG', 0, 0); // where imageDate contains base64 string

edited Jan 24 '20 at 12:41

Nikolai Shevchenko

7,083
8
33
42

answered Jan 24 '20 at 12:22

Muhammad Fahad

1

How to print a base64 pdf?

4 Answers4

Linked