使用jQuery.print.js打印

在网页开发的过程中不可避免会使用到浏览器的打印功能,通常情况下开发者需要在打印完成后提示用户进行确认,然后发送更新请求。作者在写这篇博文之前遇到过类似的应用场景:在开发某景区的兑票系统的时候,项目方要求使用他们自己的打印机进行本地打印兑票对证单,已经兑换的票不能进行二次兑换的,兑票完成后会打印对证单并更新兑票信息,为了防止兑票员误操作或者打印机出现故障导致打印对证单失败,需要在对证单打印完成后提示兑票员确认是否打印成功,在确认成功后再更新兑换信息。这种情况下需要通过调用回调函数实现,但是window.print()自身并未提供。

这里介绍一款jquery插件jQuery.print.js

参数 默认值 描述
globalStyles true 是否使用父文档的样式表
mediaPrint false 是否使用含有media=”print”的样式表
stylesheet null 链接外部样式表
noPrintSelector “.no-prin” 非打印内容选择器
iframe true 是否使用一个隐藏的iframe来进行打印,也赋值一个已有的iframe的选择器
append null 后置打印的自定义html
prepend null 前置打印的自定义html
manuallyCopyFormValues true 打印时是否更新的表单数据
deferred $.Deferred() 在window.print()调用后resolve一个jQuery.Deferred对象
timeout 750 从iframe或者新窗口加载打印数据的超时时间
doctype “” 打印文档的文档类型


下面的demo实现了对用户输入的文本的打印:


<html>
    <head>
        print test  
    head>
    <body>
        <input id="print_text_input" type="text">
        <input type="button" value="打印" onclick="print()">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js">script>
    <script type="text/javascript" src="./jQuery.print.js">script>
    <script type="text/javascript"> 
        function print() {
            var printText = $("print_text_input").val();
            var printTemplate = $("
"
).text(printText); printTemplate .print(); }
script> body> html>

jQuery.print.js的print方法通过在调用window.print()后resovle一个 jQuery.Deferred 对象来间接实现回调功能,所以只需向print方法中传入自定义的Defered对象。

var printDtd = $.Deferred();
printTemplate.print({deferred: printDtd});
$.when(printDtd)
.done(function() {
    confirm("是否打印成功?");
});

上述例子在实际运行时会出现确认窗口先弹出,然后弹出打印窗口的情况,这是由于jQuery.print.js通过一个隐藏的iframe实现的数据打印,默认有一定的数据加载时间,可以通过setTimeout来实现打印完成后弹出确认窗口。

$.when(printDtd)
.done(function() {
    setTimeout(function() {
        confirm("是否打印成功?");
    }, 1000);
});

你可能感兴趣的:(Demo)