Question

我正试图在浏览器发生打印（或打印预览）时动态隐藏某些DIV。

我可以通过两个样式表轻松区分，一个用于普通，一个用于打印媒体：

但是我需要更进一步，当打印样式表在打印过程中根据特定标准变为活动时，动态隐藏一些元素

一种轻松解决问题的方法是处理一个用于处理print / printview的DOM事件，然后我可以使用jQuery更改display：none，需要隐藏的类，但我找不到DOM打印事件!!

任何人都知道解决方案是什么？

Answer 1

并非所有浏览器都允许您捕获打印事件。通过添加“打印此页面”链接，然后使用该点击事件来完成您的需要，我看到了这个问题。

Answer 2

我认为你不需要打印活动。您需要做的就是根据您的Javascript（？）标准调整@media print样式。当用户尝试打印页面时，@media print样式将适用，您的样式将生效：

<html>
<head>
<style id="styles" type="text/css">
@media print { .noprint { display:none; } }
</style>
<script type="text/javascript">
var x = Math.random();

if (x > .5) {
    var style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = '@media print { .maybe_noprint { display:none; } }';
    document.getElementsByTagName('head')[0].appendChild(style);
}
</script>
</head>
<body>
<div class="noprint">This will never print.</div>
<span class="maybe_noprint">This may print depending on the value of x.</span>
</body>
</html>

如果您使用服务器端标准来确定打印的内容，那么只需让服务器端代码吐出@media print以根据需要修饰类。此外，您可能需要考虑修改已在@media print内部的现有类，或者使用innerHTML以外的其他内容构建新CSS，我承认这对我来说很糟糕，但似乎有效在Opera 9.6，Safari for Windows 3.1.2，IE 6和Firefox 2.0.0.17（我没有测试任何其他浏览器）。

Answer 3

只需使用隐藏在打印样式表上的类标记这些DIV：

<强> HTML

<div id='div19' class='noprint'>
  ...
</div>

<强> print.css

.noprint {
  display: none;
}

如果您事先不知道需要隐藏哪些元素，可以使用javascript为给定对象设置类：

<强>的Javascript

document.getElementById('div19').className='noprint';

Answer 4

IE中有onbeforeprint个事件。它似乎不受其他主流浏览器的支持。（我测试了Firefox 3.0.3和Safari 3.1.2。）

如何自定义浏览器的输出以进行打印/打印预览？

4 个答案: