2010-07-26 96 views
17

我想在用户打印某个网页时向我的数据库发送一些信息。我可以在IE浏览器中使用onbeforeprint()onafterprint()来做到这一点,但是我希望浏览器能够以不同的方式做同样的事情。不必关心我必须使用哪些技术组合(PHP,MySQL,JavaScript,HTML),只要完成即可。有任何想法吗?onbeforeprint()和onafterprint()等效于非IE浏览器

编辑:

仍然有一些问题,与此有关。我尝试将我的函数放在我的Print.css中作为图像,但是我搞砸了一些方法。然后我试着添加一个事件监听器,但我无法让它工作得很好。如果任何人都可以在任何浏览器打印之前提供一些关于如何调用函数的更多细节,我将不胜感激。

编辑:

我对这个放弃现在,我已经有做我想做的另一种方式解决。我期待着FireFox支持onbeforeprint()和onafterprint()的那一天。

回答

6

我不是sure other browsers will allow you to。当然,你可以指定某个图像中的打印样式表,这可能只会在打印被调用时,onbeforeprint

+0

你是否在暗示这样的事情? http://www.siteexperts.com/forums/viewConverse.asp?d_id = 19568 – ubiquibacon 2010-07-27 00:17:08

+1

不知道这是否会起作用。我会建议调用一个服务器端脚本作为图像源,它确实返回一个图像,只是做你喜欢的东西(记录一个打印动作,可能设置一个会话变量,其他js在页面上可以检索/轮询等) – Wrikken 2010-07-27 09:50:31

+0

自6版以来,Firefox支持onbeforeprint,请参阅https://developer.mozilla.org/en/DOM/window.onbeforeprint – 2012-06-18 08:36:44

4

尝试掩盖本地window.print()与自己的...

// hide our vars from the global scope 
(function(){ 

    // make a copy of the native window.print 
    var _print = this.print; 

    // create a new window.print 
    this.print = function() { 
    // if `onbeforeprint` exists, call it. 
    if (this.onbeforeprint) onbeforeprint(this); 
    // call the original `window.print`. 
    _print(); 
    // if `onafterprint` exists, call it. 
    if (this.onafterprint) onafterprint(this); 
    } 

}()) 

更新时间:注释。

+0

谢谢@no,但我的代码很难。你说这会掩盖任何浏览器的原生打印功能?这也给我提出了另一个问题,我是否可以创建一个检查每个窗口事件的JavaScript函数,然后在'window.print == true'打印之前执行我想要执行的函数? – ubiquibacon 2010-07-27 00:20:17

+0

@typoknig:会的;因为你可能想要为'onbeforeprint'和'onafterprint'选择不同的名字。我假设你想从除你自己之外的其他脚本中调用'window.print'。关于你的问题的第二部分,我认为它会起作用,但这听起来像是过火了...... – 2010-07-27 00:29:18

+0

@typoknig:我在我的答案中添加了代码注释,应该帮助解释发生了什么。 – 2010-07-27 00:32:23

0

我认为这是不可能的。或者至少 - 不是用我知道的任何技术,也不用以前给出的任何答案。

使用onafterprint和使用serverside动态图像生成脚本都会告诉您,即使访问者只是打印预览模式,然后取消了,即使打印页面。

但是,我想了解如何获得正确的信息,这样我就可以肯定页面实际上打印。

30

Many browsers现在支持window.matchMedia。此API允许您检测何时CSS媒体查询生效(例如,旋转屏幕或打印文档)。对于跨浏览器方法,请结合window.matchMediawindow.onbeforeprint/window.onafterprint

以下可能会导致多次调用beforePrint()afterPrint()(例如,Chrome fires the listener every time the print preview is regenerated)。取决于您对打印进行的特定处理,这可能是也可能不是理想的。

if ('matchMedia' in window) { 
    // Chrome, Firefox, and IE 10 support mediaMatch listeners 
    window.matchMedia('print').addListener(function(media) { 
     if (media.matches) { 
      beforePrint(); 
     } else { 
      // Fires immediately, so wait for the first mouse movement 
      $(document).one('mouseover', afterPrint); 
     } 
    }); 
} else { 
    // IE and Firefox fire before/after events 
    $(window).on('beforeprint', beforePrint); 
    $(window).on('afterprint', afterPrint); 
} 

更多:http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/

+3

值得注意的是,Chrome似乎两次触发了打印事件。 – jlarson 2013-08-29 18:01:27

+0

...实际上是四次 - 一次使用media.matches = true,然后media.matches = false,然后media.matches = true,然后media.matches = false – jlarson 2013-08-29 18:47:03

+0

当我在Chrome中使用“使用系统对话框打印”时,这不起作用,窗口关闭但打印失败,只是报告:) – Augiwan 2014-02-15 17:51:42

0
(function() { 
var beforePrint = function() { 
    if($('.modal').hasClass('in')){ 
     $('body').removeClass('modal-open'); 
    } 
}; 
var afterPrint = function() { 
    if($('.modal').hasClass('in')){ 
     $('body').addClass('modal-open'); 
    } 
}; 

if (window.matchMedia) { 
    var mediaQueryList = window.matchMedia('print'); 
    mediaQueryList.addListener(function(mql) { 
     if (mql.matches) { 
      beforePrint(); 
     } else { 
      afterPrint(); 
     } 
    }); 
} 
window.onbeforeprint = beforePrint; 
window.onafterprint = afterPrint;}()); 

此代码适用于所有浏览器,用于检测打印事件。