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