Suppose I have a variable like this in JavaScript:
var h = "<html><head></head><body><h1>Example</h1><p>This is a variable I want to print to the printer with the browser!</p></body></html>" How can I send the pretty rendered content of this variable to the printer?
I've tried:
var w = window.open(); and then:
$(w).html(h); and then:
w.print(); But the thing is the Pop-up blocker blocks my new window with the printing page.
Anyone has any idea?
Thank you so much!
This is one way to approach this problem: http://jsfiddle.net/DerekL/Fn2Yh/
var h = "<h1>Example</h1><p>This is a variable I want to print to the printer with the browser!</p>"; var d = $("<div>").addClass("print").html(h).appendTo("html"); window.print(); d.remove(); @media only print{ body{ display: none; /*using @media will mess up the page if the user wants to*/ } /*print the page normally. If that's the case you would */ } /*want to set the display of the body to none manually. By putting the content that is to be printed outside body, you can now simply hide the entire document, leaving the content you need displayed.
Now normally I would not do this all inline. But for the purpose of this question I felt it was easier to read this way. Basically setup a media style sheet that allows a printable area. then assign your html to that div. Now when print is hit only the #printableArea will be sent to the printer.
<html> <head> <style type="text/css"> #printableArea { display: none; } @media print { #non-printableArea { display: none; } #printableArea { display: block; } } </style> <script type="text/javascript"> $(document).ready(function () { var h = "<html><head></head><body><h1>Example</h1><p>This is a variable I want to print to the printer with the browser!</p></body></html>"; $("#printableArea").html(h.find("body").html()); }); </script> </head> <body> <div id="printableArea"></div> <div id="non-printableArea"></div> </body> </html> 
Instead of adding a new window, you could add a special printing area to your webpage, which is only visible when printing.
HTML
<div class="non-printable"> Foo </div> <div class="printable"> </div> CSS
@media screen { .printable { display: none;} .non-printable { display: block;} } @media print { .non-printable { display: none;} .printable { display: block;} } JS
var h = "<html><head></head><body><h1>Example</h1><p>This is a variable I want to print to the printer with the browser!</p></body></html>" $('.printable').html(h); window.print(); 