4

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?

Improve this question
2
  • 2
    Refer this link I have answered it here stackoverflow.com/questions/40469412/…
    – ptchand
    Commented Jul 13, 2017 at 9: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
    Commented Dec 21, 2017 at 23:58

4 Answers 4

Reset to default
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.

Improve this answer
8
  • 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
    Commented Nov 24, 2015 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
    Commented Nov 24, 2015 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
    Commented Nov 24, 2015 at 18:34
  • 6
    The page is blank for me
    – Hooli
    Commented Sep 8, 2016 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
    Commented Jul 21, 2017 at 11:32
6 
// 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);
}
Improve this answer
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});
});
Improve this answer
0
-1

you can use jspdf to do this like

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.