打印< div id =" printarea">< / div>只要？ [英] Print <div id="printarea"></div> only?

问题描述

如何打印指定的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 - 表格采用视觉样式设置为网页，不应该打印出来。

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.

使用可见性效果更好，因为您可以转关于后代的可见度。隐形元素仍会影响布局，所以我将 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>只要？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！