如何打印指定的div(无需手动禁用页面上的所有其他内容)?
我想要避免一个新的预览对话框,所以用这个内容创建一个新窗口是没有用的。
该页面包含了几个表格,其中一个包含了我想打印的div -表格是用web的视觉样式设计的,不应该显示在打印中。
如何打印指定的div(无需手动禁用页面上的所有其他内容)?
我想要避免一个新的预览对话框,所以用这个内容创建一个新窗口是没有用的。
该页面包含了几个表格,其中一个包含了我想打印的div -表格是用web的视觉样式设计的,不应该显示在打印中。
当前回答
你可以使用一个单独的CSS样式来禁用除id为“printarea”的所有其他内容。
参见CSS设计:准备打印以获得更多的解释和示例。
其他回答
桑德罗的方法很有效。
我对它进行了调整,以允许多个printMe链接,特别是在选项卡页面和扩展文本中使用。
function processPrint(printMe){<——在这里调用一个变量
var printReadyElem = document.getElementById(printMe);<——删除了printMe周围的引号以请求一个变量
< a href = " javascript:无效(processPrint (' divID '));>Print</a> <——将要打印的div ID传递到函数上,将printMe变量转换为div ID。需要单引号
这里有一个通用的解决方案,只使用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移到左上角,以便正确打印。
你可以用这个: 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'。这不是解。
我来这个派对已经很晚了,但我想提出另一种方法。我写了一个叫做PrintElements的小JavaScript模块,用于动态打印网页的各个部分。
It works by iterating through selected node elements, and for each node, it traverses up the DOM tree until the BODY element. At each level, including the initial one (which is the to-be-printed node’s level), it attaches a marker class (pe-preserve-print) to the current node. Then attaches another marker class (pe-no-print) to all siblings of the current node, but only if there is no pe-preserve-print class on them. As a third act, it also attaches another class to preserved ancestor elements pe-preserve-ancestor.
一个非常简单的补充只打印的css将隐藏和显示各自的元素。这种方法的一些好处是保留了所有的样式,它不需要打开一个新窗口,不需要移动大量的DOM元素,而且通常它对原始文档是非侵入性的。
请参阅演示,或阅读相关文章以获得更多详细信息。
在css3中,你可以使用以下功能:
body *:not(#printarea) {
display: none;
}