Menu
Is there a way to print only the nested "id=printarea" div (with styling) using only css (not javascript), in IE8 on Windows?
<div id="main">
This should NOT be shown in Print Preview
<div id="printarea">ONLY this should be shown in Print Preview
<table><tr><th>one</th><th>one</th></tr><tr><td>one</td><td>one</td></tr></table></div>
</div>
I've tried using css, but it displays nothing (obviously) due to inheritance. The following example shows my intention.
@media print {
* { display:none; }
#printarea { display:block; }
}
I've successfully used javascript (which works), but I don't consider it an elegant solution, as I'd have to pull in all css imports and style blocks in the document.write.
function printDiv(divId){
var divToPrint = document.getElementById(divId);
newWin= window.open();
newWin.document.write('<style>table,tr,td,th{border-collapse:collapse;border:1px solid black;}</style>');
newWin.document.write(divToPrint.innerHTML);
newWin.document.close();
newWin.focus();
newWin.print();
newWin.close();
}
Example: http://jsfiddle.net/D7ZWh/2/
Related: Overriding parent's CSS display property
720
On the worksheet, select the cells that you want to define as the print area. Tip: To set multiple print areas, hold down the Ctrl key and click the areas you want to print. Each print area prints on its own page. On the Page Layout tab, in the Page Setup group, click Print Area, and then click Set Print Area.
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.
Print media is one of the oldest and basic forms of mass communication. It includes newspapers, weeklies, magazines, monthlies and other forms of printed journals. A basic understanding of the print media is essential in the study of mass communication.
JavaScript Code: You can use this function for print a specific area of web page or full web page content. Use printPageArea() function on onclick event of print button element and provide the content area div ID which you want to print.
You will have to put all other content into html elements (note the p tag)
<body>
<p>This should NOT be shown in Print Preview</p>
<div id="main">
<p>This should NOT be shown in Print Preview</p>
<div id="printarea">ONLY this should be shown in Print Preview</div>
</div>
</body>
Then you can hide all other elements below a parent. do this for each parent in the hierarchy
@media print {
body *, #main * { display:none; }
#main, #main #printarea, #main #printarea * { display:block; }
}
EDIT:
this is very similar to the second answer to printing only one div
156
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
