suchen

Heim  >  Artikel  >  Web-Frontend  >  Implementierung einer Webseitendruckfunktion basierend auf jQuery_jquery

Implementierung einer Webseitendruckfunktion basierend auf jQuery_jquery

WBOY
WBOYOriginal
2016-05-16 15:28:311344Durchsuche

Laden Sie den Code direkt hoch

<!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>

Code 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);

2. Renderings

Textbereich drucken:

Vollbilddruck:

Die von einigen Experten vorgeschlagene Methode window.print() ist ebenfalls möglich, daher werde ich sie hier nicht einzeln vorstellen. Ich hoffe, dass jeder die Implementierungsmethode der Webseitendruckfunktion ernsthaft studiert, und der Herausgeber wird es tun Gemeinsam mit allen vorankommen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Erlernen Sie ganz einfach das jQuery-Plug-in EasyUI EasyUI von validation_jqueryNächster Artikel：Erlernen Sie ganz einfach das jQuery-Plug-in EasyUI EasyUI von validation_jquery

In Verbindung stehende Artikel

Mehr sehen