我试图从浏览器中打印(或打印预览)时动态地隐藏某些DIV。如何自定义打印/打印预览的浏览器输出?
我可以很容易地由具有两个样式表,一个用于正常和一个用于打印介质静态区分:
但我需要走一步,并动态隐藏一些元件时,打印样式表变为有效在基于特定标准的打印期间
一种方法可以轻松地解决它将处理一个DOM事件来处理print/printview,然后我可以使用jQuery来更改显示:无需隐藏的类需要隐藏,但我找不到DOM打印事件!
任何人都知道解决方案是什么?
我试图从浏览器中打印(或打印预览)时动态地隐藏某些DIV。如何自定义打印/打印预览的浏览器输出?
我可以很容易地由具有两个样式表,一个用于正常和一个用于打印介质静态区分:
但我需要走一步,并动态隐藏一些元件时,打印样式表变为有效在基于特定标准的打印期间
一种方法可以轻松地解决它将处理一个DOM事件来处理print/printview,然后我可以使用jQuery来更改显示:无需隐藏的类需要隐藏,但我找不到DOM打印事件!
任何人都知道解决方案是什么?
在IE中有一个onbeforeprint事件。它似乎没有被其他主流浏览器支持。 (我测试了Firefox 3.0.3和Safari 3.1.2。)
并非所有浏览器都允许您捕获打印事件。我已经看到了通过添加“打印此页”链接,然后使用该单击事件来完成您所需的工作。
只是标记这些div与是隐藏在打印样式表类:
HTML
<div id='div19' class='noprint'>
...
</div>
print.css
.noprint {
display: none;
}
如果你不知道提前需要隐藏哪些元素,可以使用javascript为给定对象设置类CTS:
的Javascript
document.getElementById('div19').className='noprint';
我不认为你需要打印的事件。您只需根据您的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 3.1 for Windows 3.1 .2,IE 6和Firefox 2.0.0.17(我没有测试任何其他浏览器)。
你的意思是你需要在用户打印(或打印预览)页面后隐藏屏幕上的div? – 2008-10-10 12:19:43