1. 程式人生 > >使用jQuery.print.js列印

使用jQuery.print.js列印

在網頁開發的過程中不可避免會使用到瀏覽器的列印功能,通常情況下開發者需要在列印完成後提示使用者進行確認,然後傳送更新請求。作者在寫這篇博文之前遇到過類似的應用場景:在開發某景區的兌票系統的時候,專案方要求使用他們自己的印表機進行本地列印兌票對證單,已經兌換的票不能進行二次兌換的,兌票完成後會列印對證單並更新兌票資訊,為了防止兌票員誤操作或者印表機出現故障導致列印對證單失敗,需要在對證單列印完成後提示兌票員確認是否列印成功,在確認成功後再更新兌換資訊。這種情況下需要通過呼叫回撥函式實現,但是window.print()自身並未提供。

引數 預設值 描述
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 “<!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="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 = $("<div></div>").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);
});