Sometimes the printing function needs to be added to the front-end project. First of all, you must know that printing is divided into two types: overall printing and partial printing. Partial printing can be subdivided into partial printing of the specified part, and partial printing of the specified part. part. Examples look clearer than text.
The examples in this article describe how JS calls the printer function. Share it with everyone for your reference, the details are as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title><!--{$aListData.name}-->准考证</title> <input id="btnPrint" type="button" value="打印" onclick="javascript:window.print();" /> <input id="btnPrint" type="button" value="打印预览" onclick=preview(1) /> <style type="text/css" media=print> .noprint{display : none } </style> <script> function preview(oper) { if (oper < 10) { bdhtml=window.document.body.innerHTML;//获取当前页的html代码 sprnstr="<!--startprint"+oper+"-->";//设置打印开始区域 eprnstr="<!--endprint"+oper+"-->";//设置打印结束区域 prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html window.document.body.innerHTML=prnhtml; window.print(); window.document.body.innerHTML=bdhtml; } else { window.print(); } } </script> <script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script> <script> jQuery(function($){ $("#closeButton").click(function(){ window.close(); }) }); </script> </head> <body> <a id='closeButton' title='Close' href="#" >关闭</a> <!-- 打印startprint与endprint之间的内容--> <!--startprint1--> <h1>高级中学2013年预科招生考试</h1> 姓名:<!--{$aListData.name}--><br/> 性别:<!--{$aListData.gender}--><br/> 毕业学校:<!--{$aListData.grschool}--><br/> 编号:<input type="text" name="sturegcard" class="input1 ml10" value="<!--{$aListData.sturegcard}-->"/><br/> 头像:<img src="<!--{$aListData.avatar}-->" width="140"><br/> 考试日程:<br/> 地点:<br/> <!--{if $aRegExamsche}--> <!--{section name=data loop=$aRegExamsche}--> <!--{$aRegExamsche[data].date}--> <!--{$aRegExamsche[data].time}--> <!--{$aRegExamsche[data].lesson}--> <!--{$aRegExamsche[data].place}--><br/> <!--{/section}--> <!--{/if}--> <!--endprint1--> </body> </html>
The above is the detailed content of JS call printer function sample code. For more information, please follow other related articles on the PHP Chinese website!