CODEWITHSUNDEEP
javascripthtmlpdfpdfmake
Ritik Saxena
Ritik Saxena

Reputation: 724

pdfMake - open() and print() functions are not working

I'm trying to learn how to use pdfMake. I'm trying to use open and print to generate or print the information respectively. But, when I click on the button which fires the event, a new tab opens for a second and vanishes. The page which opens is displayed in history as blob:http://localhost:9999/93c1600e-3c64-42fe-8b44-fe6eeb995b5e

I'm not able to figure out the error. I'm following the official documentation of pdfMake.

Please help.

function print(){
  window.event.preventDefault()
  // this is just a simulation of the open event, replacing it with print produces the same result
  var docDefinition = { content: {text:'This is an sample PDF printed with pdfMake',fontSize:15} };
  pdfMake.createPdf(docDefinition).open();
}
<!DOCTYPE HMTL>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <script src='https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.27/pdfmake.min.js'></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.27/vfs_fonts.js"></script>
  <script src="js/print.js"></script>
</head>
<body>
  <main>
    <button onclick="print()">Print Card</button>
  </main>
</body>
</html>

Upvotes: 6

Views: 15193

Answers (4)

Diego Victor de Jesus
Diego Victor de Jesus

Reputation: 3003

PDFMake has an open issue for this problem.

PDFMake creates URLs starting with blob: to print/open a generated PDF. The problem is that this pattern of URL is used by many sites to show undesired popups to users. Then EasyList listed this URL pattern and ad blockers started blocking it.

Therefore, as steffanjj suggested, disable your ad blocker and you should be able to print/open the generated PDF. I just wanted to explain in little more detail why this is happening.

Upvotes: -1

Mhamad El Itawi
Mhamad El Itawi

Reputation: 254

for the open() it's not working even without ad blocker so i converted it to base64 then blob then fileURL

                   var docDefinition = getRWABELPDF(data);
                   var createPdf = pdfMake.createPdf(docDefinition);
                   var base64data = null;

                    createPdf.getBase64(function(encodedString) {
                        base64data = encodedString;
                       console.log(base64data );


                        var byteCharacters = atob(base64data);
                        var byteNumbers = new Array(byteCharacters.length);
                        for (var i = 0; i < byteCharacters.length; i++) {
                            byteNumbers[i] = byteCharacters.charCodeAt(i);
                        }
                        var byteArray = new Uint8Array(byteNumbers);
                        var file = new Blob([byteArray], { type: 'application/pdf;base64' });
                        var fileURL = URL.createObjectURL(file);
                        window.open(fileURL);

Upvotes: 0

Verri
Verri

Reputation: 1608

I found solution for printing in same window.

In your .html file put iframe

<iframe id="printPdf" name="printPdf"></iframe>

iframe needs style to hide himself for example (I do not know why, but if I define width and height on iframe, printing will not work):

#printPdf { position: fixed; top: 0px; left: 0px; display: block;
            padding: 0px;border: 0px;margin: 0px;
            visibility: hidden; opacity: 0; 
}

Finally, just call:

    if ('safari') {
        pdfMake.createPdf(content).open({}, window.frames['printPdf']);
        setTimeout(function() {
            window.frames['printPdf'].focus();
            window.frames['printPdf'].print();
        }, 2000)
    } else {
        pdfMake.createPdf(content).print({}, window.frames['printPdf']);
    }

Tested on Chrome v72, Firefox v65, Edge v18, Safari v12

Upvotes: 6

steffanjj
steffanjj

Reputation: 887

Please check that any type of ad blocker in your browser is turned off and try again.

Upvotes: 19

Related Questions