Home > Article > Web Front-end > How to operate JS and use the print method in the window object to implement paging printing

How to operate JS and use the print method in the window object to implement paging printing

php中世界最好的语言Original: 2018-05-29 11:14:132191browse

This time I will show you how to operate JS and use the print method in the window object to realize paging printing. How to operate JS and use the print method in the window object to realize paging printing. What are the precautions? , the following is a practical case, let’s take a look.

1. However, many cases on the Internet do not support the

paging function. Finally, the paging problem is solved through the CSS page-break-after:always style. The following code is purely written by myself. Friends in need You can copy it directly to the web page for use. Please indicate the source when reprinting, thank you!

<!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>无标题文档</title> 
<script language="javascript"> 
//打印代码 
 function Print()  
 {  
  var printStr = "<html><head><meta http-equiv=&#39;Content-Type&#39; content=&#39;text/html; charset=utf-8&#39;></head><body >"; 
  var content = ""; 
  var str = document.getElementById('page1').innerHTML;  //获取需要打印的页面元素 ，page1元素设置样式page-break-after:always，意思是从下一行开始分割。 
  content = content + str; 
  str = document.getElementById('page2').innerHTML;  //获取需要打印的页面元素 
  content = content + str; 
  printStr = printStr+content+"</body></html>";            
  var pwin=window.open("Print.htm","print"); //如果是本地测试，需要先新建Print.htm，如果是在域中使用，则不需要 
  pwin.document.write(printStr); 
  pwin.document.close();     //这句很重要，没有就无法实现 
  pwin.print();  
 } 
</script> 
</head> 
<body > 
<p><input type="button" value="打印" onclick="Print()" /></p> 
<p id="page1"> 
  <table width="100%" border="0" cellpadding="0" cellspacing="0" style="page-break-after:always" > 
  <tr><td>第一页打印内容</td></tr> 
  </table> 
</p> 
<p id="page2"> 
  <table width="100%" border="0" cellpadding="0" cellspacing="0" id="content" > 
  <tr><td>第二页打印内容</td></tr> 
  </table> 
</p> 
</body> 
</html>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to operate JS and use the print method in the window object to implement paging printing

Related articles