如何只打印页面的一部分？

Posted 2023-03-15

【中文标题】如何只打印页面的一部分？

【英文标题】：How to print only parts of a page?

【发布时间】：2010-09-18 10:53:26

【问题描述】：

我试图在用户打印这个巨大的表单之前隐藏一些 div，然后再显示 div。因此我想忽略页面的其余部分，只打印表单本身。

当然，当用户单击打印按钮时，我可以打开一个单独的页面。唯一的问题是表格真的很长，这样做会很乏味。

编辑：我之前的问题实际上并没有反映我在寻找什么。所以我把它改成了现在的。

还要感谢所有建议的 window.onbeforeprint 和 window.onafterprint。这与我编辑的问题有关。

【问题讨论】：

关于您的编辑：我的回答不能回答您的问题吗？我认为最好的方法是在 div 中添加样式，然后在样式表中使用 @media 或打印样式表的链接。

确实如此。但我不能接受两个答案。

这能回答你的问题吗？ How do I hide an element when printing a web page?

【参考方案1】：

首先，好的方法：

看看 window.onbeforeprint 和 window.onafterprint （我相信最初的问题是关于如何以编程方式进行）。

现在，更好的方法：

更好的方法是使用专门用于打印的样式。换句话说，您的 div 可能如下所示：

<div class="someClass noPrint">My Info</div>

你会在你的样式表中有这个：

.someClass font-family:arial;
@media print 
    .noPrint  display: none; 
 

另一种选择

如果需要，您也可以将其放在单独的样式表中，这样您就不必混合样式：

<link rel="stylesheet" type="text/css" media="print" href="print.css">

您的屏幕样式表可以用一种方式定义“.someClass”，然后您的打印样式表可以用一种完全不同的方式定义它。

【讨论】：

这是我们公司的做法。它工作得很好，我们不必使用 javascript。

是的，我们在所有页眉和页脚部分以及任何不应打印的菜单上设置了 noPrint。

我更喜欢创建一个单独的样式表来处理所有与打印相关的样式更改，而不是将它们添加到现有样式表中。

【参考方案2】：

IE 支持onbeforeprint 和onafterprint，但您真正想要的是打印样式表。

<link rel="stylesheet" type="text/css" media="print" href="print.css">

另请参阅：this answer

【参考方案3】：

您可能需要考虑使用media="print"创建专门用于打印的样式表

【参考方案4】：

您应该真正将其实现为 CSS media=print 样式。链接元素的媒体属性可用于选择样式表应用于哪些媒体。检查this article