如何打印指定的div(无需手动禁用页面上的所有其他内容)?
我想要避免一个新的预览对话框，所以用这个内容创建一个新窗口是没有用的。
该页面包含了几个表格，其中一个包含了我想打印的div -表格是用web的视觉样式设计的，不应该显示在打印中。
当前回答
这里有一个通用的解决方案，只使用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移到左上角，以便正确打印。
其他回答
嗯……使用样式表的类型进行打印…例如:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
print.css:
div { display: none; }
#yourdiv { display: block; }
你可以使用一个单独的CSS样式来禁用除id为“printarea”的所有其他内容。
参见CSS设计:准备打印以获得更多的解释和示例。
我找到了解决办法。
@media print {
.print-area {
background-color: white;
height: 100%;
width: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index:1500;
visibility: visible;
}
@page{
size: portrait;
margin: 1cm;
}
/*IF print-area parent element is position:absolute*/
.ui-dialog,
.ui-dialog .ui-dialog-content{
position:unset !important;
visibility: hidden;
}
}
我有一个用最少代码更好的解决方案。
把你的可打印部分放在一个div中，像这样的id:
<div id="printableArea">
<h1>Print me</h1>
</div>
<input type="button" onclick="printDiv('printableArea')" value="print a div!" />
然后添加一个事件，如onclick(如上所示)，并像上面所做的那样传递div的id。
现在让我们创建一个非常简单的javascript:
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
注意到这有多简单了吗?没有弹出窗口，没有新窗口，没有疯狂的样式，没有像jquery这样的JS库。真正复杂的解决方案(答案并不复杂，也不是我指的)的问题是，它永远不会在所有浏览器上转换，永远!如果您想让样式有所不同，可以按照选中的答案所示，将media属性添加到样式表链接(media="print")。
没有绒毛，重量很轻，很好用。
这里有一个通用的解决方案，只使用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移到左上角，以便正确打印。
