How to send a pdf file directly to the printer using JavaScript?

Question

How to send a PDF file directly to the printer using JavaScript?

I found two answers in a forum:

<embed src="vehinvc.pdf" id = "Pdf1" name="Pdf1" hidden>
<a onClick="document.getElementById('Pdf1').printWithDialog()" style="cursor:hand;">Print file</a>

and

<OBJECT id = "Pdf2" name="Pdf2" CLASSID="clsid:CA8A9780-280D-11CF-A24D-444553540000" WIDTH="364" HEIGHT="290">
     <PARAM NAME='SRC' VALUE="file.pdf">
</OBJECT>
<a onClick="document.Pdf2.printWithDialog()">Print file</a>

But my problem is that it just works on IE, and doesnt work in Firefox or Chrome.

Is there any solution for this?

i don't think it is about adobe reader's plugin.. because i have the same version of adobe reader in all the browsers.. still this code of JavaScript does not working in just Internet Explorer.. — , Aug 16 '11 at 13:40
@Jignesh Manek: I do not believe you are going to find a solution for all browsers. The best you can expect is to bring up the print dialog box and honestly, that should really be good enough. As a user, the last thing I want is to have my printer just start printing something without a chance to check my settings, paper size, tray, etc. Think about it... even most of your various applications, word processors, spreadsheets, etc. simply invoke the print dialog box too. — Sparky, Aug 16 '11 at 18:21
@Sparky672: yes you are true. but using this code, firefox does not even show the print dialog box.. — , Aug 16 '11 at 18:41
@Jignesh Manek: What exactly do you want then? Is it acceptable to just open the Print Dialog box in all browsers? This thread has more info: http://stackoverflow.com/questions/687675/can-a-pdf-files-print-dialog-be-opened-with-javascript — Sparky, Aug 16 '11 at 19:19
Yes. It is acceptable to just open the Print Dialog box in all browsers.. I tried all the answers in the thread you gave.. but none of them are working with my browser ! — , Aug 17 '11 at 05:12
http://stackoverflow.com/questions/205180/how-to-print-a-pdf-from-the-browser — Sparky, Aug 17 '11 at 14:06

zsubzwary · Answer 1 · 2017-11-30T09:10:35.750

25

I think this Library of JavaScript might Help you:

It's called Print.js

First Include

<script src="print.js"></script>
<link rel="stylesheet" type="text/css" href="print.css">

It's basic usage is to call printJS() and just pass in a PDF document url: printJS('docs/PrintJS.pdf')

What I did was something like this, this will also show "Loading...." if PDF document is too large.

<button type="button" onclick="printJS({printable:'docs/xx_large_printjs.pdf', type:'pdf', showModal:true})">
    Print PDF with Message
</button>

However keep in mind that:

Firefox currently doesn't allow printing PDF documents using iframes. There is an open bug in Mozilla's website about this. When using Firefox, Print.js will open the PDF file into a new tab.

edited Nov 30 '17 at 09:10

answered Nov 30 '17 at 02:31

zsubzwary

1,196
1
14
22

1

Can this library be used to print a PDF bypassing the print dialogue? – W.M. May 05 '18 at 21:01
You should give it a shot, check it out...! I am not certain about that @W.M. ! – zsubzwary May 07 '18 at 00:24
@W.M. is print dialogue bypass work for you with this library? – habib Jun 16 '21 at 08:30

score 12 · Answer 2 · edited May 23 '17 at 11:46

There are two steps you need to take.

First, you need to put the PDF in an iframe.

  <iframe id="pdf" name="pdf" src="document.pdf"></iframe>

To print the iframe you can look at the answers here:

Javascript Print iframe contents only

If you want to print the iframe automatically after the PDF has loaded, you can add an onload handler to the <iframe>:

  <iframe onload="isLoaded()" id="pdf" name="pdf" src="document.pdf"></iframe>

the loader can look like this:

function isLoaded()
{
  var pdfFrame = window.frames["pdf"];
  pdfFrame.focus();
  pdfFrame.print();
}

This will display the browser's print dialog, and then print just the PDF document itself. (I personally use the onload handler to enable a "print" button so the user can decide to print the document, or not).

I'm using this code pretty much verbatim in Safari and Chrome, but am yet to try it on IE or Firefox.

I tried this method in Chrome, IE and Firefox but it isn't working as expected. In Chrome I get "pdfFrame.print is not a function". In FF I get "Error: Permission denied to access property "print"". IE gives no error but does not trigger the print dialog. The PDF is on the same origin and X-Frame-Options is set to SAMEORIGIN. Is this method just outdated? — Jacob Ensor, Mar 15 '17 at 19:44

score 11 · Answer 3 · answered Jun 04 '20 at 23:35

11

This is actually a lot easier using a dataURI, because you can just call print on the returned window object.

// file is a File object, this will also take a blob
const dataUrl = window.URL.createObjectURL(file);

// Open the window
const pdfWindow = window.open(dataUrl);

// Call print on it
pdfWindow.print();

This opens the pdf in a new tab and then pops the print dialog up.

answered Jun 04 '20 at 23:35

John Neuhaus

1,784
20
32

is this working with other file types like xlsx or docx ? – Franz Jul 01 '20 at 00:18

Dhruv Murarka · Answer 4 · 2013-08-27T16:42:26.757

4

Try this: Have a button/link which opens a webpage (in a new window) with just the pdf file embedded in it, and print the webpage.

In head of the main page:

<script type="text/javascript">
function printpdf() 
{
myWindow=window.open("pdfwebpage.html");
myWindow.close;  //optional, to close the new window as soon as it opens
//this ensures user doesn't have to close the pop-up manually
}
</script>

And in body of the main page:

<a href="printpdf()">Click to Print the PDF</a>

Inside pdfwebpage.html:

<html>
<head>    
</head>

<body onload="window.print()">
<embed src="pdfhere.pdf"/>

</body>
</html>

edited Aug 27 '13 at 16:42

answered Sep 16 '12 at 05:50

Dhruv Murarka

376
5
12

2

This method doesn't seem to work at all for me. Chrome, IE, and FireFox all act the same way - a print dialog appears but it simply prints the webpage with a small/invisible embedded PDF on it. I need to trigger the PDF print, not the webpage print. Am I missing something? – Jacob Ensor Mar 15 '17 at 19:52

Joe Solutions · Answer 5 · 2011-08-16T15:37:12.270

0

a function to house the print trigger...

function printTrigger(elementId) {
    var getMyFrame = document.getElementById(elementId);
    getMyFrame.focus();
    getMyFrame.contentWindow.print();
}

an button to give the user access...

(an onClick on an a or button or input or whatever you wish)

<input type="button" value="Print" onclick="printTrigger('iFramePdf');" />
an iframe pointing to your PDF...

<iframe id="iFramePdf" src="myPdfUrl.pdf" style="dispaly:none;"></iframe>

More : http://www.fpdf.org/en/script/script36.php

edited Aug 16 '11 at 15:37

answered Aug 16 '11 at 15:30

Joe Solutions

11
1

again it does nothing in Firefox and Chrome.. and while testing in IE, the main html file contents are sent to printer !! – Aug 16 '11 at 18:06

score -2 · Answer 6 · edited May 28 '19 at 13:53

<?php

$browser_ver = get_browser(null,true);
//echo $browser_ver['browser'];

if($browser_ver['browser'] == 'IE') {
?>

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pdf print test</title>
<style>
    html { height:100%; }
</style>
<script>
    function printIt(id) {
        var pdf = document.getElementById("samplePDF");
        pdf.click();
        pdf.setActive();
        pdf.focus();
        pdf.print();
    }
</script>
</head>

<body style="margin:0; height:100%;">

<embed id="samplePDF" type="application/pdf" src="/pdfs/2010/dash_fdm350.pdf" width="100%" height="100%" />
<button onClick="printIt('samplePDF')">Print</button>


</body>
</html>

<?php
} else {
?>
<HTML>
<script Language="javascript">

function printfile(id) { 
    window.frames[id].focus();
    window.frames[id].print();
} 

</script>
<BODY marginheight="0" marginwidth="0">

<iframe src="/pdfs/2010/dash_fdm350.pdf" id="objAdobePrint" name="objAdobePrint" height="95%" width="100%" frameborder=0></iframe><br>

<input type="button" value="Print" onclick="javascript:printfile('objAdobePrint');">

</BODY>
</HTML>
<?php
}
?>

code in my question already works with IE.. i want a fix for firefox and chrome ! — , Aug 16 '11 at 18:25

How to send a pdf file directly to the printer using JavaScript?

6 Answers6

Linked