JavaScript打印事件处理程序

Question

我想在打印时修改样式：

有没有javascript事件可以监听文件>>print被调用的情况？它是什么？此外，是否有处理程序可以在打印完成时使用？它是什么？

如果有其他更好的方法，例如使用样式表，应该如何操作？

- user13276

Answer 1

不同的样式表

你可以为打印指定一个不同的样式表。

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

一个样式表

如kodecraft所提到的，您也可以使用@media块将样式放入同一文件中。

@media print {
    div.box {
        width:100px;
    }
}

@media screen {
    div.box {
        width:400px;
    }
}

- EndangeredMassa

Answer 2

Firefox 6现在支持beforeprint和afterprint事件

https://developer.mozilla.org/en/Printing#Detecting_print_requests

- Roger Roelofs

---

您可以使用matchMedia API在Chrome 9+和Safari 5.1+中模拟此操作。https://developer.mozilla.org/en/DOM/window.matchMedia - Roger Roelofs

罗杰，你能详细说明一下这个解决方案吗？ 特别是在Chrome/Safari中模拟它。 谢谢。 - dovidweisz

@wapsee jsfiddle.net/W4As4 - Cameron Martin

Answer 3

在IE中，有非标准的window.onBeforePrint()和window.onAfterPrint()事件监听器。 我不知道是否有非IE的方法来实现它。

你想要做什么样的更改？通过为打印样式表指定不同的规则，可能可以解决您的问题。

- danieltalsky

---

为了打印，将其他内容添加到DOM可能会更好。这可以通过print.css完成，通过默认隐藏其他元素并启用它们来实现。不过我更喜欢使用JavaScript方法。你知道其他浏览器的解决方案吗？ - Hendrik

Answer 4

我们还发现您可以使用以下方式进行打印样式：

<style type="text/css">
@media print {
    div
    {
        overflow:visible;
    }    
}
</style>

- user13276

Answer 5

IE有onbeforeprint和onafterprint

- matt h