Home > Article > Web Front-end > Single page printing and batch printing implementation methods of web pages
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='Content-Type' content='text/html; charset=utf-8'>" +"<link rel='stylesheet' type='text/css' href='css/printcss.css'></head><body>"; var printCnt='打印的内容'; 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!