Question

我需要一个jQuery的事件，相当于jQuery上的onbeforeprint和onafterprint，它是跨浏览器兼容的。

我不能在CSS上使用@media print，因为我需要从文档中删除一些类，并在完成打印时添加这些类。

Answer 1

为什么不用@media打印这样的声明工作？：

.hide-on-print {
  display: none;
}

或者，您可以使用此jquery插件：http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/并只在div中设置打印文档并打印，但这需要打印链接。可以创建一个div off屏幕并将其加载到您要打印的内容，然后使用jquery打印该div。 Blowsie的答案基本上是在一个新的临时浏览器窗口中完成的。然而，这个方法听起来像一些沉重的JS提升，并将延迟打印功能的性能，直到javascript完成执行。同样，所有这些javascript解决方案都需要Print链接才能工作 - 如果用户执行File-＆gt; Print或Ctrl + P，它们将无法工作。

如果您尝试使用JavaScript捕获Print事件，那么只能通过使用window.onBeforePrint和window.onAfterPrint在IE中完成，如您所知。目前无法在Mozilla和Webkit浏览器中捕获此事件。对于打印样式，他们推荐@media css并且不相信通过javascript干扰打印功能。

我强烈推荐前一种方法--css。它是最兼容跨浏览器和最可预测的。您的样式仅在打印时应用，并且在浏览器中不可见，仅在打印页面上可见。使用javascript / jquery方法，用户可能会获得一些不断变化的内容样式（或者在Blowsie的示例中，看到弹出窗口或更糟糕的情况，禁用弹出窗口并且方法失败），并且在错误的情况下遭受糟糕的用户体验打印功能不一致。

这个问题很常见，这里也有答案：Javascript Event Handler for Print

Answer 2

如果您要使用这样的打印功能，您可以按照自己的意愿...

        $("#Print").click(function () {
            var a = window.open('', '', 'scrollbars=yes,width=1000,height=650');
            a.document.open("text/html");
            a.document.write('<html><head>');
            a.document.write('<link rel="stylesheet" href="css/default.css" />');
            a.document.write('<link rel="stylesheet" href="css/print.css" />');
            a.document.write('</head><body><br/>');
            a.document.write($('#Content').html());
            a.document.write('</body></html>');
            a.document.close();
            a.print();
        });

Answer 3

Firefox 7支持onbeforeprint和onafterprint事件 https://developer.mozilla.org/en/DOM/DOM_event_reference

jQuery的onbeforeprint和onafterprint事件（crossbrowser事件）

3 个答案: