问题描述
如何打印指定的 div(无需手动禁用页面上的所有其他内容)?
How do I print the indicated div (without manually disabling all other content on the page)?
我想避免使用新的预览对话框,因此使用此内容创建新窗口没有用.
I want to avoid a new preview dialog, so creating a new window with this content is not useful.
该页面包含几个表格,其中一个包含我要打印的 div - 该表格的样式为 Web 视觉样式,不应在打印中显示.
The page contains a couple of tables, one of them contains the div I want to print - the table is styled with visual styles for the web, that should not show in print.
推荐答案
这里是一个通用的解决方案,仅使用 CSS,我已经验证它可以工作.
Here is a general solution, using CSS only, which I have verified to work.
@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
那么它的后代也不会显示.要使用它,您必须更改页面的结构.
Alternative approaches aren't so good. Using display
is tricky because if any element has display:none
then none of its descendants will display either. To use it, you have to change the structure of your page.
使用 visibility
效果更好,因为您可以为后代打开可见性.不可见元素仍然会影响布局,所以我将 section-to-print
移动到左上角,以便正确打印.
Using visibility
works better since you can turn on visibility for descendants. The invisible elements still affect the layout though, so I move section-to-print
to the top left so it prints properly.
这篇关于打印 <div id="printarea"></div>只要?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!