Menu
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!
690
JavaScript does not have any print object or print methods. You cannot access output devices from JavaScript. The only exception is that you can call the window.print() method in the browser to print the content of the current window.
To print the content of div in JavaScript, first store the content of div in a JavaScript variable and then the print button is clicked. The contents of the HTML div element to be extracted.
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.
OOP: http://jsfiddle.net/DerekL/sLQzd/
164
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
