Print <div id="printarea"></div> only?
css, dhtml, javascript, printing
Solution
Here is a general solution, using CSS only, which I have verified to work.
@media print {
body {
visibility: hidden;
}
#section-to-print {
visibility: visible;
position: absolute;
left: 0;
top: 0;
}
}
There's a Code Sandbox if you want to see this in action. Click the Open In New Window button above the preview; then you can use the browser's Print command to see a preview of the printout.
Alternative approaches aren't so good. Using `display` is tricky because if any element has `display:none` then none of its descendants will display either. To use it, you have to change the structure of your page.
Using `visibility` works better since you can turn on visibility for descendants. The invisible elements still affect the layout though, so I move `section-to-print` to the top left so it prints properly.
Problem
How do I print the indicated div (without manually disabling all other content on the page)? I want to avoid a new preview dialog, so creating a new window with this content is not useful. The page contains a couple of tables, one of them contains the div I want to print - the table is styled with visual styles for the web, that should not show in print.