Implementation of web page paging printing_javascript skills

1． First introduce a WebBrowser on the page that needs to be printed. You can add it directly: Copy the code The code is as follows: to the page, or you can use JavaScript to add it temporarily when needed: Copy the code The code is as follows: document.body.insertAdjacentHTML("beforeEnd", " classid="clsid:8856F961-340A-11D0- A96B-00C04FD705A2">"); 2. Page setup and print preview As shown below, you can call it directly Copy code The code is as follows: document.all.WebBrowser.ExecWB(6,6) Print directly document.all .WebBrowser.ExecWB(8,1) Page settings document.all.WebBrowser.ExecWB(7,1) Print preview or: Copy code The code is as follows: execScript("document.all.WebBrowser.ExecWB 7, 1","VBScript"); 3 Hide non-printing page elements and pagination CSS has a Media attribute that can set the printing and display formats separately. For example, ... The format in the middle will only work during printing and will not affect the display interface. So you can set .Noprint{display:none;} .PageNext{page-break-after: always;} Then add: class="Noprint" to the page elements that you do not want to print, then they will not appear in printing and print preview. Add where you want to paginate: That's it. 4． Printing a specific part of the page This is achieved by creating a new page for the specific part that needs to be printed, then loading it into an IFrame on the main page, and then calling the print method of the IFrame to print only the content in the IFrame. For example: The following springFrame js function will only print the content in the Iframe and can be directly referenced and used, such as printFrame(FrameId); Copy code The code is as follows: window.print = printFrame; // main stuff function printFrame(frame, onfinish) { if ( !frame ) frame = window; function execOnFinish() { switch ( typeof(onfinish) ) { case "string": execScript(onfinish); break; case "function": onfinish(); } if ( focused && !focused.disabled ) focused.focus(); } if (( frame.document.readyState !== "complete") &&( !frame.document.confirm("The document to print is not downloaded yet! Continue with printing?") )) { execOnFinish(); return; } var eventScope = printGetEventScope(frame); var focused = document.activeElement; window.printHelper = function() { execScript("on error resume next: printWB.ExecWB 6, 1", "VBScript"); printFireEvent(frame, eventScope, "onafterprint"); printWB.outerHTML = ""; execOnFinish(); window.printHelper = null; } document.body.insertAdjacentHTML("beforeEnd", " classid=\"clsid:8856F961-340A-11D0-A96B-00C04FD705A2\">"); printFireEvent(frame, eventScope, "onbeforeprint"); frame.focus(); window.printHelper = printHelper; setTimeout("window.printHelper()", 0); } // helpers function printIsNativeSupport() { var agent = window.navigator.userAgent; var i = agent.indexOf("MSIE ")+5; return parseInt(agent.substr(i)) >= 5 && agent.indexOf("5.0b1") } function printFireEvent(frame, obj, name) { var handler = obj[name]; switch ( typeof(handler) ) { case "string": frame.execScript(handler); break; case "function": handler(); } } function printGetEventScope(frame) { var frameset = frame.document.all.tags("FRAMESET"); if ( frameset.length ) return frameset[0]; return frame.document.body; } Iframe中所装载页面的打印效果在所装载页面设置就可以了，如分页等。 5．后台打印 通过建一个隐藏Iframe实现的，当然仍然会有页面装载的过程。 下面的函数创建Iframe装载页面并打印。如 printHidden(url) //url为页面地址 function printHidden(url) { document.body.insertAdjacentHTML("beforeEnd", " "); var doc = printHiddenFrame.document; doc.open(); doc.write(" "); doc.write(" url + "\"> "); doc.write(" "); doc.close(); } function onprintHiddenFrame() { function onfinish() { printHiddenFrame.outerHTML = ""; if ( window.onprintcomplete ) window.onprintcomplete(); } printFrame(printHiddenFrame.printMe, onfinish); } 它用到了printFrame，所以别忘了引用前面的函数。 以下为demo: 报表 classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height="0" width="0"> .Noprint{display:none;} .PageNext{page-break-after: always;} onclick="document.all.WebBrowser.ExecWB(6,6)"> onclick="document.all.WebBrowser.ExecWB(8,1)"> onclick="document.all.WebBrowser.ExecWB(7,1)"> onclick="printHidden(FrameId)"> 1 2 height="30%" src="2.html"> window.print = printFrame; // main stuff function printFrame(frame, onfinish) { if ( !frame ) frame = window; function execOnFinish() { switch ( typeof(onfinish) ) { case "string": execScript(onfinish); break; case "function": onfinish(); } if ( focused && !focused.disabled ) focused.focus(); } if (( frame.document.readyState !== "complete") &&( !frame.document.confirm("The document to print is not downloaded yet! Continue with printing?") )) { execOnFinish(); return; } var eventScope = printGetEventScope(frame); var focused = document.activeElement; window.printHelper = function() { execScript("on error resume next: printWB.ExecWB 6, 1", "VBScript"); printFireEvent(frame, eventScope, "onafterprint"); printWB.outerHTML = ""; execOnFinish(); window.printHelper = null; } document.body.insertAdjacentHTML("beforeEnd", " classid="clsid:8856F961-340A-11D0-A96B-00C04FD705A2">"); printFireEvent(frame, eventScope, "onbeforeprint"); frame.focus(); window.printHelper = printHelper; setTimeout("window.printHelper()", 0); } // helpers function printIsNativeSupport() { var agent = window.navigator.userAgent; var i = agent.indexOf("MSIE ") 5; return parseInt(agent.substr(i)) >= 5 && agent.indexOf("5.0b1") } function printFireEvent(frame, obj, name) { var handler = obj[name]; switch ( typeof(handler) ) { case "string": frame.execScript(handler); break; case "function": handler(); } } function printGetEventScope(frame) { var frameset = frame.document.all.tags("FRAMESET"); if ( frameset.length ) return frameset[0]; return frame.document.body; } function printHidden(url) { document.body.insertAdjacentHTML("beforeEnd", " "); var doc = printHiddenFrame.document; doc.open(); doc.write(" "); doc.write(" url ""> "); doc.write(" "); doc.close(); } function onprintHiddenFrame() { function onfinish() { printHiddenFrame.outerHTML = ""; if ( window.onprintcomplete ) window.onprintcomplete(); } printFrame(printHiddenFrame.printMe, onfinish); }