有没有办法只在Windows上的IE8中使用css(而不是javascript)打印嵌套的"id = printarea"div(带样式)？
<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>
我尝试过使用css,但由于继承,它显然没有显示任何内容.以下示例显示了我的意图.
@media print {
* { display:none; }
#printarea { display:block; }
}
我已成功使用javascript(有效),但我认为它不是一个优雅的解决方案,因为我必须在document.write中提取所有css导入和样式块.
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();
}
示例: http ://jsfiddle.net/D7ZWh/2/
相关: 覆盖父级的CSS显示属性
您必须将所有其他内容放入html元素(请注意p标记)
<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>
然后,您可以隐藏父项下面的所有其他元素.为层次结构中的每个父项执行此操作
@media print {
body *, #main * { display:none; }
#main, #main #printarea, #main #printarea * { display:block; }
}
编辑:
这与仅打印一个div的第二个答案非常相似