如何打印指定的div(无需手动禁用页面上的所有其他内容)?
我想要避免一个新的预览对话框,所以用这个内容创建一个新窗口是没有用的。
该页面包含了几个表格,其中一个包含了我想打印的div -表格是用web的视觉样式设计的,不应该显示在打印中。
如何打印指定的div(无需手动禁用页面上的所有其他内容)?
我想要避免一个新的预览对话框,所以用这个内容创建一个新窗口是没有用的。
该页面包含了几个表格,其中一个包含了我想打印的div -表格是用web的视觉样式设计的,不应该显示在打印中。
当前回答
如果你只想打印这个div,你必须使用指令:
@media print{
*{display:none;}
#mydiv{display:block;}
}
其他回答
我找到了解决办法。
@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;
}
}
总的来说,这些答案我都不太喜欢。如果你有一个类(比如printableArea),并把它作为body的直接子类,那么你可以在你的print CSS中这样做:
body > *:not(.printableArea) {
display: none;
}
//Not needed if already showing
body > .printableArea {
display: block;
}
对于那些在其他地方寻找printableArea的人,你需要确保显示printableArea的父元素:
body > *:not(.parentDiv),
.parentDiv > *:not(.printableArea) {
display: none;
}
//Not needed if already showing
body > .printableArea {
display: block;
}
使用可见性可能会导致大量间距问题和空白页面。这是因为可见性保持了元素的空间,只是将其隐藏起来,而在显示时将其移除,并允许其他元素占用其空间。
这个解决方案有效的原因是您不需要抓取所有元素,只需要将body的直接子元素隐藏起来。下面的其他解决方案使用display css,隐藏所有元素,这将影响printableArea内容内的所有内容。
我不建议使用javascript,因为你需要有一个用户点击的打印按钮,而标准的浏览器打印按钮不会有同样的效果。如果你真的需要这样做,我会做的是存储主体的html,删除所有不需要的元素,打印,然后添加回html。如前所述,我将避免这种情况,如果你可以和使用CSS选项如上所述。
注意:你可以添加任何CSS到打印CSS使用内联样式:
<style type="text/css">
@media print {
//styles here
}
</style>
或者像我通常使用的链接标签:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
如果你只想打印这个div,你必须使用指令:
@media print{
*{display:none;}
#mydiv{display:block;}
}
你可以使用一个单独的CSS样式来禁用除id为“printarea”的所有其他内容。
参见CSS设计:准备打印以获得更多的解释和示例。
这里有一个通用的解决方案,只使用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移到左上角,以便正确打印。