如何打印指定的div(无需手动禁用页面上的所有其他内容)?
我想要避免一个新的预览对话框，所以用这个内容创建一个新窗口是没有用的。
该页面包含了几个表格，其中一个包含了我想打印的div -表格是用web的视觉样式设计的，不应该显示在打印中。
当前回答
你可以用这个: http://vikku.info/codesnippets/javascript/print-div-content-print-only-the-content-of-an-html-element-and-not-the-whole-document/
或者使用visibility:visible和visibility:hidden css属性和@media print{}
'display:none'将隐藏所有嵌套的'display:block'。这不是解。
其他回答
你可以使用一个单独的CSS样式来禁用除id为“printarea”的所有其他内容。
参见CSS设计:准备打印以获得更多的解释和示例。
我拿起使用JavaScript的内容，并创建了一个窗口，我可以打印代替…
在css3中，你可以使用以下功能:
body *:not(#printarea) {
display: none;
}
这里有一个通用的解决方案，只使用CSS，我已经验证工作。
@media print {
body * {
visibility: hidden;
}
#section-to-print, #section-to-print * {
visibility: visible;
}
#section-to-print {
position: absolute;
left: 0;
top: 0;
}
}
其他方法都不太好。使用display很棘手，因为如果任何元素都没有display:none，那么它的后代也不会显示。要使用它，您必须更改页面的结构。
使用可见性效果更好，因为您可以为后代打开可见性。但是，不可见的元素仍然会影响布局，所以我将section-to-print移到左上角，以便正确打印。
我尝试了提供的许多解决方案。没有一个是完美的。它们要么丢失CSS绑定，要么丢失JavaScript绑定。我找到了一个完美而简单的解决方案，既不会丢失CSS也不会丢失JavaScript绑定。
HTML:
<div id='printarea'>
<p>This is a sample text for printing purpose.</p>
<input type='button' id='btn' value='Print' onclick='printFunc();'>
</div>
<p>Do not print.</p>
Javascript:
function printFunc() {
var divToPrint = document.getElementById('printarea');
var htmlToPrint = '' +
'<style type="text/css">' +
'table th, table td {' +
'border:1px solid #000;' +
'padding;0.5em;' +
'}' +
'</style>';
htmlToPrint += divToPrint.outerHTML;
newWin = window.open("");
newWin.document.write("<h3 align='center'>Print Page</h3>");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
}
