在网页开发的过程中不可避免会使用到浏览器的打印功能,通常情况下开发者需要在打印完成后提示用户进行确认,然后发送更新请求。作者在写这篇博文之前遇到过类似的应用场景:在开发某景区的兑票系统的时候,项目方要求使用他们自己的打印机进行本地打印兑票对证单,已经兑换的票不能进行二次兑换的,兑票完成后会打印对证单并更新兑票信息,为了防止兑票员误操作或者打印机出现故障导致打印对证单失败,需要在对证单打印完成后提示兑票员确认是否打印成功,在确认成功后再更新兑换信息。这种情况下需要通过调用回调函数实现,但是()自身并未提供。
这里介绍一款jquery插件
参数 | 默认值 | 描述 |
---|---|---|
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() | 在()调用后resolve一个对象 |
timeout | 750 | 从iframe或者新窗口加载打印数据的超时时间 |
doctype | “<!doctype html>” | 打印文档的文档类型 |
下面的demo实现了对用户输入的文本的打印:
<!DOCTYPE html>
<html>
<head>
print test
</head>
<body>
<input id="print_text_input" type="text">
<input type="button" value="打印" onclick="print()">
<script type="text/javascript" src="/jquery-1.9."></script>
<script type="text/javascript" src="./"></script>
<script type="text/javascript">
function print() {
var printText = $("print_text_input").val();
var printTemplate = $("<div></div>").text(printText);
printTemplate .print();
}
</script>
</body>
</html>
的print方法通过在调用()后resovle一个 对象来间接实现回调功能,所以只需向print方法中传入自定义的Defered对象。
var printDtd = $.Deferred();
({deferred: printDtd});
$.when(printDtd)
.done(function() {
confirm("是否打印成功?");
});
上述例子在实际运行时会出现确认窗口先弹出,然后弹出打印窗口的情况,这是由于通过一个隐藏的iframe实现的数据打印,默认有一定的数据加载时间,可以通过setTimeout来实现打印完成后弹出确认窗口。
$.when(printDtd)
.done(function() {
setTimeout(function() {
confirm("是否打印成功?");
}, 1000);
});