Print external HTML file with Javascript

Question

I have a "print" button on index.html. What code do I need to print the print.html file? I mean, when I press the button from index.html, print the page print.html.

No load. I need to print external file by button. – vladchooo May 29 '11 at 16:09 — vladchooo, May 29 '11 at 16:09

score 3 · Answer 1 · edited Nov 17 '17 at 21:54

3

function closePrint () {
  document.body.removeChild(this.__container__);
}

function setPrint () {
  this.contentWindow.__container__ = this;
  this.contentWindow.onbeforeunload = closePrint;
  this.contentWindow.onafterprint = closePrint;
  this.contentWindow.focus(); // Required for IE
  this.contentWindow.print();
}

function printPage (sURL) {
  var oHiddFrame = document.createElement("iframe");
  oHiddFrame.onload = setPrint;
  oHiddFrame.style.visibility = "hidden";
  oHiddFrame.style.position = "fixed";
  oHiddFrame.style.right = "0";
  oHiddFrame.style.bottom = "0";
  oHiddFrame.src = sURL;
  document.body.appendChild(oHiddFrame);
}

Then use

onclick="printPage('print_url');"

edited Nov 17 '17 at 21:54

Paul Roub

36,322
27
84
93

answered Nov 17 '17 at 21:40

MRRaja

1,073
12
25

2

great solution -- deserves more appreciation imo – khaverim Jan 10 '19 at 22:21
Awesome solution! – Collins Oct 20 '20 at 11:57

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

I think you're looking for window.print()

Update

Just noticed you've specified file names in there and that you want to print print.html when a button on index.html is clicked. There's no built-in way to do this (in the sense that you can't pass any arguments to window.print() indicating the document to print). What you could do is load the document to print into an iframe or open a new window and on load, invoke window.print() on that container.

Here are some forum posts and web pages that talk about the same thing:

Update 2

Here's some quick-and-dirty code - note that this will only work if both your pages are in the same domain. Additionally, Firefox seems to fire the load event for an empty iframe also - so the print dialog will be displayed immediately on load, even when no src value was set for the iframe.

index.html

<html> 
<head> 
  <title>Index</title> 
  <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  <script>
    $(document).ready(function(){
        $('#loaderFrame').load(function(){
            var w = (this.contentWindow || this.contentDocument.defaultView);
            w.print();
        });

        $('#printerButton').click(function(){
            $('#loaderFrame').attr('src', 'print.html');
        });
    });
  </script>
  <style>
     #loaderFrame{
        visibility: hidden;
        height: 1px;
        width: 1px;
     }
  </style>
</head> 
<body> 
    <input type="button" id="printerButton" name="print" value="Print It" />

    <iframe id="loaderFrame" ></iframe>
</body>
</html>

print.html

<html> 
<head> 
    <title>To Print</title> 
</head> 
<body> 
    Lorem Ipsum - this is print.html
</body>
</html>

Update 3
You might also want to see this: How do I print an IFrame from javascript in Safari/Chrome

Can you give code, because I'm new and... But I don't want the page to be visible... Just when I press the button on index.html the page print.html be printed... — vladchooo, May 29 '11 at 16:29
I don't think all browsers would allow that - it could be a security issue. I'm updating the answer, please check in a couple of minutes. — no.good.at.coding, May 29 '11 at 16:45
As for making the content to be printed invisible, you could style the new window or the iFrame with CSS so that it's either hidden or of a very small size - note that a browser may have some restrictions about making windows smaller than a certain size. I'd suggest using an iFrame instead. — no.good.at.coding, May 29 '11 at 16:48
@vladchooo I've updated my answer to add two simple HTML pages to demonstrate. I've used jQuery because it makes things a lot simpler. This works in FF4.0.1, Chrome 11 and IE 8. However, Firefox does have a problem that it will fire the load event even for an iframe with no `src` set. You'll need to work around that. Let me know if this answers your question. — no.good.at.coding, May 29 '11 at 17:22

score 1 · Answer 3 · answered Mar 28 '14 at 09:01

You can use the JQuery printPage plugin (https://github.com/posabsolute/jQuery-printPage-plugin). This plugin works fine and you can simply print an external html page.

Example:

 <html> 
    <head> 
      <title>Index</title> 
      <script src="http://www.position-absolute.com/creation/print/jquery.min.js" type="text/javascript"></script>
      <script src="http://www.position-absolute.com/creation/print/jquery.printPage.js" type="text/javascript"></script>
      <script>
         $(document).ready(function() {
             $(".btnPrint").printPage();
         });
      </script>
    </head> 
    <body> 
        <input type="button" id="printerButton" name="print" value="Print It" />

        <p><a class="btnPrint" href='iframe.html'>Print!</a></p>
    </body>
 </html>

Print external HTML file with Javascript

3 Answers3