Close Menu
    零五网 - 为热爱技术的人而生！

    jquery打印插件jqprint.js使用教程

    0
    By on JQuery

    最近的项目要使用web前端打印，本来在网上搜索了一下采用的js：window.print()局部打印网页的方法，但是经过实际测试发现兼容性不好，无奈只好再找其他方法，终于被我找到了一款基于jquery的轻量级web前端打印插件-jqprint.js，该插件兼容IE6以上版本的IE浏览器及chrome、firefox等浏览器。下面附上具体使用教程：

    1.引用文件

    <script language="javascript" src="js/jquery.min.js"></script>
<script language="javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script language="javascript" src="js/jquery.jqprint-0.3.js"></script>

    相关说明：第一句代码是引用jquery，第二句代码是引用jquery迁移辅助插件，这里不引用的话在某些jquery版本下使用jqprint会报版本不兼容错误：Cannot read property ‘opera’ of undefined，第三局代码是引用jqprint插件。

    2.打印js代码

    <script language="javascript">
function webpri(){
   $("#pribody").jqprint();
}
</script>

    3.html代码

    需要打印的内容

    <table id="pribody">
<tr>
  <td>姓名</td>
  <td>性别</td>
  <td>年龄</td>
</tr>
<tr>
  <td>张三</td>
  <td>男</td>
  <td>18</td>
</tr>
</table>

    打印按钮

    <input type="button" onclick=" webpri()" value="打印"/>

    好了，到这里就完成了jqprint.js插件的使用，你可以点击下面的链接获取更多内容。

    附：jqprint源码（下载jqprint）

    (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
	};

    jQuery.fn.outer = function() {
      return $($('<div></div>').html(this.clone())).html();
    } 
})(jQuery);

    相关推荐