Melaksanakan fungsi pencetakan halaman web berdasarkan jQuery

Melaksanakan fungsi pencetakan halaman web berdasarkan jQuery_jquery

WBOY

Lepaskan： 2016-05-16 15:28:31

asal

1343 orang telah melayarinya

Muat naik kod terus

<!DOCTYPE html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>index</title>
</head>
<body>
  
  <div style="text-align:center; margin-top: 30px">
    <div id="printArea">
      <div>......文本打印区域......</div>
      <div>......文本打印区域......</div>
      <div>......文本打印区域......</div>
      <div>......文本打印区域......</div>
      <div>......文本打印区域......</div>
    </div>  
  
    <br>
    <br>
  
    <input id="btnPrint" type="button" value="打印文本区域"></input> 
    <input id="btnPrintFull" type="button" value="全屏打印"></input> 
  </div>
</body>

<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery.PrintArea.min.js"></script> 

<script> 
  $("#btnPrint").click(function(){  
    $("#printArea").printArea(); 
  }); 

  $("#btnPrintFull").click(function(){  
    $("body").printArea(); 
  }); 
  
</script>

</html>

Salin selepas log masuk

Kod jquery.PrintArea.min.js:

(function(c){function g(){var b="<head><title>"+d.popTitle+"</title>";c(document).find("link").filter(function(){return"stylesheet"==c(this).attr("rel").toLowerCase()}).filter(function(){var a=c(this).attr("media");return void 0==a&#63;!1:""==a.toLowerCase()||"print"==a.toLowerCase()}).each(function(){b+='<link type="text/css" rel="stylesheet" href="'+c(this).attr("href")+'" >'});return b+="</head>"}function h(b){return'<body><div class="'+c(b).attr("class")+'">'+c(b).html()+"</div></body>"}function k(b){c("input,select,textarea",b).each(function(){var a=c(this).attr("type");"radio"==a||"checkbox"==a&#63;c(this).is(":not(:checked)")&#63;this.removeAttribute("checked"):this.setAttribute("checked",!0):"text"==a&#63;this.setAttribute("value",c(this).val()):"select-multiple"==a||"select-one"==a&#63;c(this).find("option").each(function(){c(this).is(":not(:selected)")&#63;this.removeAttribute("selected"):this.setAttribute("selected",!0)}):"textarea"==a&&(a=c(this).attr("value"),c.browser.mozilla&#63;this.firstChild&#63;this.firstChild.textContent=a:this.textContent=a:this.innerHTML=a)});return b}function l(){var b=d.id,a;try{a=document.createElement("iframe"),document.body.appendChild(a),c(a).attr({style:"border:0;position:absolute;width:0px;height:0px;left:0px;top:0px;",id:b,src:""}),a.doc=null,a.doc=a.contentDocument&#63;a.contentDocument:a.contentWindow&#63;a.contentWindow.document:a.document}catch(e){throw e+". iframes may not be supported in this browser.";}if(null==a.doc)throw"Cannot find document.";return a}function m(){var b;b="location=no,statusbar=no,directories=no,menubar=no,titlebar=no,toolbar=no,dependent=no,width=595px,height=842px,top=0,left=0,toolbar=no,scrollbars=no,personalbar=no"+(",resizable=yes,screenX="+d.popX+",screenY="+d.popY+"");b=window.open("","_blank",b);b.doc=b.document;return b}var f=0,n={mode:"iframe",popHt:500,popWd:400,popX:200,popY:200,popTitle:"",popClose:!1},d={};c.fn.printArea=function(b){c.extend(d,n,b);f++;c("[id^=printArea_]").remove();b=k(c(this));d.id="printArea_"+f;var a,e;switch(d.mode){case"iframe":e=new l;a=e.doc;e=e.contentWindow||e;break;case"popup":e=new m,a=e.doc}a.open();a.write(("iframe"!=d.mode&&d.strict&#63;'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01'+(0==d.strict&#63;" Trasitional":"")+'//EN" "http://www.w3.org/TR/html4/'+(0==d.strict&#63;"loose":"strict")+'.dtd">':"")+"<html>"+g()+h(b)+"</html>");a.close();e.focus();e.print();"popup"==d.mode&&d.popClose&&e.close()}})(jQuery);

Salin selepas log masuk

2. Rendering

Kawasan teks cetak:

Percetakan skrin penuh:

Kaedah window.print() yang dicadangkan oleh sesetengah pakar juga mungkin, jadi saya tidak akan memperkenalkannya satu persatu di sini Saya harap semua orang akan serius mengkaji kaedah pelaksanaan fungsi pencetakan halaman web, dan editor akan melakukannya membuat kemajuan bersama-sama dengan semua orang.