夏日博客

A-A+

jquery页面打印插件PrintArea.js使用方法

2016年01月11日 前端设计 暂无评论 阅读 8 views 次

如果要放以前以我们打死页面都是直接使用js print方法来实现了，下面我整理了一款jquery页面打印插件PrintArea.js使用方法，希望例子能够帮助到各位朋友。

看到这个插件的名字，能猜得到它是干什么用的吗？

jquery.PrintArea.js是一款可以实现网页打印的插件，实用的方法非常简单。

下面就简单介绍一下它的使用方法。

1、保存jquery.PrintArea.js。

  1. (function ($) {  
  2.     var printAreaCount = 0;  
  3.     $.fn.printArea = function () {  
  4.         var ele = $(this);  
  5.         var idPrefix = "printArea_";  
  6.         removePrintArea(idPrefix + printAreaCount);  
  7.         printAreaCount++;  
  8.         var iframeId = idPrefix + printAreaCount;  
  9.         var iframeStyle = 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;';  
  10.         iframe = document.createElement('IFRAME');  
  11.         $(iframe).attr({  
  12.             style: iframeStyle,  
  13.             id: iframeId  
  14.         });  
  15.         document.body.appendChild(iframe);  
  16.         var doc = iframe.contentWindow.document;  
  17.         $(document).find("link").filter(function () {  
  18.             return $(this).attr("rel").toLowerCase() == "stylesheet";  
  19.         }).each(  
  20.                 function () {  
  21.                     doc.write('<link type="text/css" rel="stylesheet" href="' 
  22.                             + $(this).attr("href") + '" >');  
  23.                 });  
  24.         doc.write('<div class="' + $(ele).attr("class") + '">' + $(ele).html()  
  25.                 + '</div>');  
  26.         doc.close();  
  27.         var frameWindow = iframe.contentWindow;  
  28.         frameWindow.close();  
  29.         frameWindow.focus();  
  30.         frameWindow.print();  
  31.     }  
  32.     var removePrintArea = function (id) {  
  33.         $("iframe#" + id).remove();  
  34.     };  
  35. })(jQuery);  

2、调用jquery.min.js和jquery.PrintArea.js

3、调用printArea()方法。

下面是简单的代码部分：

  1. <div class="my_show">  
  2.         <p>注意事项：</p>  
  3.        <P>1、考生必须带齐准考证、身份证，方可进入考场。</P>  
  4.         <P>2、考生自备橡皮、2B铅笔、黑色字迹的钢笔、签字笔或圆珠笔。</P>  
  5.         <P>3、严禁将寻呼机、移动电话、电子记事本、计算器等电子设备带至考场。</P>  
  6.        <P>4、考试前30分钟可以进入考场;考试开始30分钟后，不得入场;考试期间不得提前交卷、退场。</P>  
  7.       <P>5、严禁将答题卡、题本、试卷、草稿纸等带出考场。</P>  
  8.       <P>6、考生必须遵守考场规则，若有作弊行为，将被取消考试资格。</P>  
  9. </div>  
  10. <button class="print">打印</button>  

如上所示，将需要打印的内容放在一个div里，在点击打印按钮时再调用打印的方法即可。如下：

  1. $(".print").click(function(){  
  2.     $(".my_show").printArea();  
  3. });  

这样就可以实现打印的功能啦，有兴趣的可以试一下。

标签：

给我留言