web 页面分页打印的实现

以你之姓@ 2022-08-05 16:16 240阅读 0赞

**1．首先引入一个WebBrowser在需要打印的页面，可以直接添加：**

**代码如下:**

<object id="WebBrowser" classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height="0" width="0"> 
    </object>

到页面，或者使用JavaScript在需要的时候临时添加也可以：

**代码如下:**

document.body.insertAdjacentHTML("beforeEnd", 
    "<object id=\"WebBrowser\" width=0 height=0 \ 
    classid=\"clsid:8856F961-340A-11D0-A96B-00C04FD705A2\">");

**2 .页面设置和打印预览**  
如下所示，直接调用即可   
**代码如下:**

document.all.WebBrowser.ExecWB(6,6) 直接打印 
    document.all.WebBrowser.ExecWB(8,1) 页面设置 
    document.all.WebBrowser.ExecWB(7,1) 打印预览

或者：

代码如下:

execScript("document.all.WebBrowser.ExecWB 7, 1","VBScript");

**3 隐藏不打印的页面元素和分页**  
CSS 有个Media 属性，可以分开设置打印和显示的格式。  
如 <style media="print" type="text/css"> …</style> 中间的格式将只在打印时起作用，不会影响显示界面。  
所以可以设定  
<style media="print" type="text/css">  
.Noprint\{display:none;\}  
.PageNext\{page-break-after: always;\}  
</style>  
然后给不想打印的页面元素添加： class="Noprint" ，那就不会出现在打印和打印预览中了。  
想分页的地方添加： <div class="PageNext"></div> 就可以了。  
**4．打印页面的特定部分**  
通过将需要打印的特定部分另建一个页面，然后装入主页面的一个IFrame中，再调用IFrame的打印方法，只打印IFrame中的内容实现的。  
如：  
<iframe style="visibility: visible" name="FrameId" width="100%" height="30%" src="NeedPrintedPage.asp"></iframe>  
下面的pringFrame js函数将只打印Iframe中的内容，可以直接引用使用,如printFrame(FrameId);   
代码如下:

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", 
    "<object id=\"printWB\" width=0 height=0 \ 
    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") < 0; 
    } 
    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", 
    "<iframe name=printHiddenFrame width=0 height=0></iframe>"); 
    var doc = printHiddenFrame.document; 
    doc.open(); 
    doc.write("<body οnlοad=\"parent.onprintHiddenFrame()\">"); 
    doc.write("<iframe name=printMe width=0 height=0 src=\"" + 
    url + "\"></iframe>"); 
    doc.write("</body>"); 
    doc.close(); 
    } 
    function onprintHiddenFrame() { 
    function onfinish() { 
    printHiddenFrame.outerHTML = ""; 
    if ( window.onprintcomplete ) window.onprintcomplete(); 
    } 
    printFrame(printHiddenFrame.printMe, onfinish); 
    } 
    它用到了printFrame，所以别忘了引用前面的函数。 
    以下为demo: 
    <html> 
    <head> 
    <title>报表</title> 
    <object id="WebBrowser" 
    classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height="0" 
    width="0"> 
    </object> 
    <style media="print" type="text/css"> 
    .Noprint{display:none;} 
    .PageNext{page-break-after: always;} 
    </style> 
    </head> 
    <body> 
    <div class="Noprint"> 
    <input type="button" value="print" 
    οnclick="document.all.WebBrowser.ExecWB(6,6)"> 
    <input type="button" value="printset" 
    οnclick="document.all.WebBrowser.ExecWB(8,1)"> 
    <input type="button" value="view" 
    οnclick="document.all.WebBrowser.ExecWB(7,1)"> 
    <input type="button" value="frame" 
    οnclick="printHidden(FrameId)"> 
    </div> 
    <div class="PageNext"> 
    1 
    </div> 
    <div class="PageNext"> 
    2 
    </div> 
    <iframe style="visibility: visible" diplay="none"name="FrameId" width="100%" 
    height="30%" src="2.html"></iframe> 
    </body> 
    </html> 
    <script type="text/javascript"> 
    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", 
    "<object id=\"printWB\" width=0 height=0 \ 
    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") < 0; 
    } 
    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", 
    "<iframe name=printHiddenFrame width=0 height=0></iframe>"); 
    var doc = printHiddenFrame.document; 
    doc.open(); 
    doc.write("<body οnlοad=\"parent.onprintHiddenFrame()\">"); 
    doc.write("<iframe name=printMe width=0 height=0 src=\"" + 
    url + "\"></iframe>"); 
    doc.write("</body>"); 
    doc.close(); 
    } 
    function onprintHiddenFrame() { 
    function onfinish() { 
    printHiddenFrame.outerHTML = ""; 
    if ( window.onprintcomplete ) window.onprintcomplete(); 
    } 
    printFrame(printHiddenFrame.printMe, onfinish); 
    } 
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，240人围观）

还没有评论，来说两句吧...

相关阅读

相关 JAVA WEB实现分页查询

> ![36c992e6d5634ca6979cb0f069131052.jpeg][] 文章目录前言一、分页思想？二、使用步骤总结

待我称王封你为后i/ 2024年04月07日 16:03/ 0 赞/ 129 阅读

相关 java web--页面分页技术

在设计信息浏览页面时，如果信息量很大，则经常需要分页显示信息。在这种情况下，分页技术就可以很好的帮助到我们。目录 1.分页技术的设计思想 2.分页的具体实现 3

你的名字/ 2023年02月15日 00:23/ 0 赞/ 62 阅读

相关 jqprint 分页打印_jQuery打印Html页面自动分页

最近项目中需要用到打印HTML页面，需要指定区域打印，使用jquery.PrintArea.js 插件用法： Javascript代码 ![Image 1][] $(

喜欢ヅ旅行/ 2023年01月01日 05:50/ 0 赞/ 192 阅读

相关 web 页面分页打印的实现

1．首先引入一个WebBrowser在需要打印的页面，可以直接添加：代码如下: <object id="WebBrowser" classid=CLSID:

以你之姓@/ 2022年08月05日 16:16/ 0 赞/ 241 阅读

相关 Java Web前端页面中分页的实现

1、查询信息的封装 public class QueryInfo { private int currentPage = 1; private i

╰+攻爆jí腚メ/ 2022年07月14日 03:23/ 0 赞/ 198 阅读

相关 web 实现分页打印功能

通过 css 的 page-break-after 属性结合 print() 实现 web 分页打印功能 > 最近在工作中碰到了一个需要前端实现分页打印的功能，查了很多资

本是古典何须时尚/ 2022年01月18日 23:23/ 0 赞/ 435 阅读

相关 js实现页面分页效果

最近接触老项目，项目要求修改表格添加分页功能，采用的bootstrap-table,在完成项目后，决定原生简单实现一下分页效果。效果： ![watermark_type_

谁借莪１个温暖的怀抱￠/ 2021年11月23日 00:42/ 0 赞/ 567 阅读

相关 java web实现分页查询

引言 > 思路：本次教大家采用java+jsp+servlet+c3p0技术实现数据的分页查询，在这之前，请创建好数据库表和搭建好基础框架并连接上数据库。分页会用到一个封

我会带着你远行/ 2021年09月21日 21:50/ 0 赞/ 566 阅读

相关 web页面单页打印以及批量打印

打印事件：window.print() 1.单页打印（布局打印）： function printCnt(){ //1.获取当前页的html代码

野性酷女/ 2021年09月14日 15:48/ 0 赞/ 759 阅读

相关 Web--简单实现分页查询

建表及准备数据 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG

Dear 丶/ 2021年08月13日 22:35/ 0 赞/ 520 阅读