jquery jqprint是一個非常方便的打印插件，可以幫助我們簡化打印操作。在使用之前，我們需要先了解一下它的源碼，下面我們一起來看一下。
// 使用jquery的擴展機制，給jquery對象添加jqprint方法
$.fn.jqprint = function(options) {
// 復制原始元素，防止對原始元素的改變
var $iframe = $("");
var opt = $.extend({}, $.fn.jqprint.defaults, options);
// 將iframe隱藏在頁面之外，因為只是用來打印，無需放在頁面中
$iframe.css({
position: "absolute",
width: "0px",
height: "0px",
left: "-600px",
top: "-600px"
}).appendTo($("body:first"));
// 將需要打印的元素復制到新的iframe中
$iframe.contents().find("body").append($(this).clone());
// 打印操作
function print() {
if ($iframe.get(0).contentWindow.document.execCommand) {
$iframe.get(0).contentWindow.document.execCommand("print", false, null);
} else {
$iframe.get(0).contentWindow.print();
}
$iframe.remove();
}
// 自定義頁眉頁腳
if (opt.pageHeader || opt.pageFooter) {
$iframe.contents().find("head").append('");
var $html = $iframe.contents().find("html");
if (opt.pageHeader) {
$html.css("border-top", "1px solid #000");
$('').prependTo($html);
}
if (opt.pageFooter) {
$html.css("border-bottom", "1px solid #000");
$('').appendTo($html);
}
}
// 延遲打印實現
if (opt.delay) {
setTimeout(function(){
print();
}, parseInt(opt.delay));
} else {
print();
}
};
// 默認配置
$.fn.jqprint.defaults = {
debug: false,
importCSS: true, // 是否導入頁面中的CSS
printContainer: true, // 是否打印容器中的內容
operaSupport: true, // 是否支持opera瀏覽器
ieSupport: true, // 是否支持ie瀏覽器
delay: 2000, // 延遲打印時間，單位：毫秒
pageHeader: "", // 自定義頁眉
pageHeaderHeight: "30px", // 頁眉高度
pageFooter: "", // 自定義頁腳
pageFooterHeight: "30px", // 頁腳高度
pageWidth: "21cm", // 頁面寬度
pageHeight: "29.7cm", // 頁面高度
pageMargin: "10mm" // 頁面邊距
};上面的源碼主要分為三個部分：
- 使用jquery的擴展機制，給jquery對象添加jqprint方法；
- 在jqprint方法中實現了打印的操作；
- 默認配置和自定義頁眉頁腳的實現。
其中最重要的是打印的實現，主要是通過創建一個隱藏在頁面之外的iframe，將需要打印的內容復制到iframe中，然后通過命令或者api實現打印操作，最后將iframe移除。如果需要自定義頁眉頁腳，則需要將自定義的內容加入到iframe中，并在style中添加相關CSS。
通過了解jqprint的源碼，我們可以更好地理解它的實現原理，從而更好地應用它，提高工作效率。
上一篇html+透明的黑色代碼
下一篇css兼容正確方法