Single page printing and batch printing implementation methods of web pages-JS Tutorial-php.cn

Single page printing and batch printing implementation methods of web pages

小云云

Release： 2018-03-17 15:07:41

Original

11934 people have browsed it

This article mainly shares with you the single-page printing and batch printing implementation methods of web pages, hoping to help everyone.

Print event: window.print()

1. Single page printing (layout printing):

function printCnt(){
    //1.获取当前页的html代码  
    var body = window.document.body.innerHTML; 
	//2.要打印的部分（#print里面的内容就是要打印的内容）
    window.document.body.innerHTML =document.getElementById("print").innerHTML; 
    window.print();
    window.document.body.innerHTML = body;
	//重新载入当前文档:
    location.reload();
}
注意：location.reload();要加，因可解决JS window.print()第二次点击事件失效问题

Copy after login

2. Batch printing

Note:

(1). Control page break: page-break-after:always

Note: Avoid using the paging attribute in tables, floating elements, and block elements with borders

(2). Add a height to the content of each page to prevent distortion

<p  id="printcnt">
	<p id="page1" style="height：300px;page-break-after:always" >报告单1</p>
	<p id="page2" style="height：300px;page-break-after:always" >报告单2</p>
</p>

Copy after login

(3) If the css style is not loaded for printing, please add: var printStr='';

var printHead = "<html><head><meta http-equiv=&#39;Content-Type&#39; content=&#39;text/html; charset=utf-8&#39;>"
			+"<link rel=&#39;stylesheet&#39;  type=&#39;text/css&#39; href=&#39;css/printcss.css&#39;></head><body>";
var printCnt=&#39;打印的内容&#39;;
printStr = printHead + printCnt;

Copy after login

(4). If you use window.open("showPrint.html","print"); to print the preview page

printStr = printHead + printCnt;  
//如果是本地测试，需要先新建Print.html，如果是在域中使用，则不需要
var pwin=window.open("showPrint.html","print");
pwin.document.write(printStr); 
pwin.document.close();//这个是必须的 
注意：pwin.document.close(); 可以关闭showPrint.html的页面，使其第二次打印的时候不会跳转到showPrint.html

Copy after login

Related recommendations:

Three methods of page printing using javascript_Typical special effects

javascript partial page printing implementation code_javascript skills

js or jquery realizes page printing and partial printing_javascript skills

The above is the detailed content of Single page printing and batch printing implementation methods of web pages. For more information, please follow other related articles on the PHP Chinese website!