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

use*_*793 8 css browser printing

我正试图在浏览器发生打印(或打印预览)时动态隐藏某些DIV.

通过使用两个样式表,我可以轻松地进行静态区分,一个用于普通,一个用于打印介质:

但是,当打印样式表在打印期间根据特定条件变为活动状态时,我需要更进一步并动态隐藏一些元素

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

谁知道解决方案是什么?

der*_*rby 5

并非所有浏览器都允许您捕获打印事件.我已经通过添加"打印此页面"链接,然后使用该点击事件来完成您所需的操作来解决此问题.


Gra*_*ner 5

我认为你不需要打印活动.您需要做的就是@media print根据您的Javascript(?)标准调整样式.当用户尝试打印页面时,@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>
Run Code Online (Sandbox Code Playgroud)

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


Pat*_*ney 1

IE 中有一个onbeforeprint事件。其他主要浏览器似乎不支持它。(我测试了 Firefox 3.0.3 和 Safari 3.1.2。)