Home > Article > Web Front-end > Single page printing and batch printing implementation methods of web pages

Single page printing and batch printing implementation methods of web pages

小云云Original: 2018-03-17 15:07:4111900browse

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()第二次点击事件失效问题

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>

(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;

(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

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of JavaScript json format examplesNext article：Detailed explanation of JavaScript json format examples

See more

Single page printing and batch printing implementation methods of web pages

Related articles