利用JQuery jqprint實現列印功能
阿新 • • 發佈：2019-01-04
1，要先引入jquery.js 和 jquery.jqprint.js 2個js檔案 下載連結：jquery.jqprint.js
2，例項程式碼如下
3，執行結果<html> <head> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.jqprint-0.3.js"></script> <script type="text/javascript"> $(document).ready(function($){ $('#img').jqprint({ debug: false, importCSS: true, printContainer: true, operaSupport: false }) }) </script> </head> <body> <img id="img" src="print.jpg"></img> </body> </html>
4，屬性的介紹
debug: false, //如果是true則可以顯示iframe檢視效果（iframe預設高和寬都很小，可以再原始碼中調大），預設是false importCSS: true, //true表示引進原來的頁面的css，預設是true。（如果是true，先會找$("link[media=print]")，若沒有會去找$("link")中的css檔案） printContainer: true, //表示如果原來選擇的物件必須被納入列印（注意：設定為false可能會打破你的CSS規則）。 operaSupport: false //表示如果外掛也必須支援歌opera瀏覽器，在這種情況下，它提供了建立一個臨時的列印選項卡。預設是true
5，jquery.jqprint-0.3的原始碼如下
// ----------------------------------------------------------------------- // Eros Fratini - [email protected] // jqprint 0.3 // // - 19/06/2009 - some new implementations, added Opera support // - 11/05/2009 - first sketch // // Printing plug-in for jQuery, evolution of jPrintArea: http://plugins.jquery.com/project/jPrintArea // requires jQuery 1.3.x // // Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php //------------------------------------------------------------------------ (function($) { var opt; $.fn.jqprint = function (options) { opt = $.extend({}, $.fn.jqprint.defaults, options); var $element = (this instanceof jQuery) ? this : $(this); if (opt.operaSupport && $.browser.opera) { var tab = window.open("","jqPrint-preview"); tab.document.open(); var doc = tab.document; } else { var $iframe = $("<iframe />"); if (!opt.debug) { $iframe.css({ position: "absolute", width: "0px", height: "0px", left: "-600px", top: "-600px" }); } $iframe.appendTo("body"); var doc = $iframe[0].contentWindow.document; } if (opt.importCSS) { if ($("link[media=print]").length > 0) { $("link[media=print]").each( function() { doc.write("<link type='text/css' rel='stylesheet' href='" + $(this).attr("href") + "' media='print' />"); }); } else { $("link").each( function() { doc.write("<link type='text/css' rel='stylesheet' href='" + $(this).attr("href") + "' />"); }); } } if (opt.printContainer) { doc.write($element.outer()); } else { $element.each( function() { doc.write($(this).html()); }); } doc.close(); (opt.operaSupport && $.browser.opera ? tab : $iframe[0].contentWindow).focus(); setTimeout( function() { (opt.operaSupport && $.browser.opera ? tab : $iframe[0].contentWindow).print(); if (tab) { tab.close(); } }, 1000); } $.fn.jqprint.defaults = { debug: false, importCSS: true, printContainer: true, operaSupport: true }; // Thanks to 9__, found at http://users.livejournal.com/9__/380664.html jQuery.fn.outer = function() { return $($('<div></div>').html(this.clone())).html(); } })(jQuery);