Whats the best way to print the contents of a DIV?
A:
The best way to do it would be to submit the contents of the div to the server and open a new window where the server could put those contents into the new window.
If that's not an option you can try to use a client-side language like javascript to hide everything on the page except that div and then print the page...
Sonny Boy
2010-02-12 21:45:48
No need to bounce it to the server. You could open a browser window and set the contents and invoke the print command.
Jonathon
2010-02-12 21:54:44
You can create a new window from the client.
Pointy
2010-02-12 21:54:49
Jonathon: I like that solution. Do you have any example code?
usertest
2010-02-12 21:58:32
A:
Create a separate print stylesheet that hides all other elements except the content you want to print. Flag it using 'media="print" when you load it:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
This allows you to have a completely different stylesheet loaded for printouts.
If you want to force the browser's print dialog to appear for the page, you can do it like this on load using JQuery:
$(function() { window.print(); });
or triggered off of any other event you want such as a user clicking a button.
Carl Russmann
2010-02-12 21:51:46
Yes that'd work too; it's hard - well, impossible - to know exactly what the scenario is.
Pointy
2010-02-12 21:55:24
I agree that a separate CSS is the ideal solution. And copying the div's contents to a new window is a quick solution.
Bill Paetzke
2010-02-12 22:16:14
A:
- Open a new window
- Open the document object of the new window and write into it a simple document containing nothing but the div you've got and necessary html header etc - you may also want to have the document pull in a stylesheet, depending on your content is
- Put a script in the new page to call window.print()
- Trigger the script
Pointy
2010-02-12 21:53:28
+5
A:
<html>
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" > </script>
<script type="text/javascript">
function PrintElem(elem)
{
Popup($(elem).text());
}
function Popup(data)
{
var mywindow = window.open('', 'my div', 'height=400,width=600');
mywindow.document.write('<html><head><title>my div</title>');
/*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.document.close();
mywindow.print();
return true;
}
</script>
</head>
<body>
<div id="mydiv">
This will be printed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a quam at nibh adipiscing interdum. Nulla vitae accumsan ante.
</div>
<div>
This will not be printed.
</div>
<div id="anotherdiv">
Nor will this.
</div>
<input type="button" value="Print Div" onclick="PrintElem('#mydiv')" />
</body>
</html>
Bill Paetzke
2010-02-12 22:06:18
This is a quick solution. The ideal solution is to use a separate CSS for printing. Perhaps you can elaborate on the details (requirements) of your problem.
Bill Paetzke
2010-02-12 22:18:27
Hi, thanks. I've got a separate css file called main.css but with no way of linking it to the new window.
usertest
2010-02-12 22:25:58
You can reference the stylesheet in the popup window. Add another line of code in between <head> tags: mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
Bill Paetzke
2010-02-12 22:32:54
I added the line of code to my example (commented out though), in case that wasn't clear.
Bill Paetzke
2010-02-12 22:39:25
I couldn't get the stylesheet working, but I added them manually. Thanks.
usertest
2010-02-13 22:38:41
A:
This is great stuff - I'm using the script and it works fine. Two questions though...
Is there a way to slow down mywindow.print()? - it opens the print dialog box before the page had loaded so you can't see what you're printing (if you hit the print button it prints fine though).
How can the print dialog box be positioned to avoid opening on top of the window with the material to be printed - right now it opens right on top of it and you can't see what's to be printed (assuming problem #1 is easily resolved).
TraderY
2010-05-11 19:10:06
+1
A:
Although this has been said by @gmcalab, If you are using jQuery, you can use my printElement plugin.
There's a sample here, and more information about the plugin here.
The usage is rather strait forward, just grab an element with a jQuery selector and print it:
$("myDiv").printElement();
Hope it helps!
Erik
2010-09-26 14:57:54