zoukankan      html  css  js  c++  java
  • LODOP多个表格带表格页脚关联

    之前的博文的关联是比较简单的,有时候需要用到多个表格,每个表格下方紧跟着某个内容,而表格之间又连续关联这种情况。

    这时候要注意关联的序号是否正确,是否关联到了正确的打印项。

    简短问答:
    1.多个表格连续关联,重叠了
    参考lodop技术手册 set_print_stylea的的第一个参数的解释,排查关联的序号是否正确。

    从init到print是一个任务,任务里所有打印项都参与排序,调试JS,排查关联序号是否正确。

    2.多个表格连续关联,每个表格下方紧跟着某个的打印项,出现了重叠。
    (1)参考lodop技术手册 set_print_stylea的的第一个参数的解释,调试JS,排查关联的序号是否正确。
    (2)把紧跟着的打印项和表格打印项合成一个,用add_print_htm输出,这样紧跟着的打印项和table本身合成了一个打印项,关联的时候只连续关联每个htm打印项就行了。

    注意紧跟着表格的打印项也是打印项,也会参与排序,从init到print是一个任务,任务里所有打印项都参与排序。

    --简短问答结束----

    如图,多个table连续关联,只有table打印项的时候,直接table2关联table1,table3关联table2,可以按照序号关联,也可以用-1进行连续关联,-1就是紧跟着的前面的打印项。

    但是如果不只是有table,还需要每个table有自己关联的页脚,那么关联就不是序号1,2,3,4这种了,连续关联也不是-1了,-1代表紧跟着的前面的打印项,table之间有其他打印项,就是-2了。

    如果要不用负数的,想用序号的:
    没有table自己关联的页脚的情况下,可以直接table2关联table1,table3关联table2,这样,关联序号是1,2,3,4.....
    如果中间有其他打印项存在,想用整个顺序的序号的情况下,就需要调试JS,排查设置合适的序号,如果关联的打印项不对,会出现一些问题。

    如图,第二个打印预览中,为了观察方便,对代码进行了些格式调整,对紧跟着table的text打印项进行了缩进,会更直观一些。
    图中可以看出,一个table紧跟后面紧跟着一个text,table高度不定,text总是紧跟着一定的距离。这里面有两种关联,一个是所有table形成的关联串,一个是每个table和它下方的小text的小关联。

    想要每个table直接间距相同,table之间连续关联,这时候序号是:
    第一个table前面没有打印项,不需要关联。
    第二个table关联第一个table,第二个table关联第一个打印项。
    第三个table关联第二个table,第三个table关联第三个打印项。
    进入打印设计,打开左侧的打印项列表,可以查看到打印项的序号,查看每个table是否关联到合适的打印项。

    如果table非常多,也可以用循环。
    循环可先找序号规律,然后console.log进行调试排查,排查序号是否正常。
    如果是一个table后面紧跟着一个text这种,可以把table和text看做一组。
    1.第一个table前面没有打印项,不需要关联。
    2.第二个table前面,前面有一组table+text的,两个打印项,减去最后一个text打印项,就是紧跟着的前面的table,也就是2-1=1,关联序号是1.
    3.第三个table前面,有两组table+text的,2乘以2是4,减去最后一个text打印项,就是紧跟着的前面的table,4-1=3,关联序号是3.
    4.第四个table,前面有三组,3乘以2=6.6-1=5,关联序号是5。
    以此类推,关联序号是前面的table组数乘以2,减去最后一个text,就是紧跟着的前面的table打印项序号。
    也就是四个打印项的时候关联序号是1,3,5。

    循环打印时,这里设置了两个变量,一个是用来计数第几个table的,table盛放在div里,这里的div取名时,用的div1,div2,变量j用来计数table打印项。
    第二个变量是用来计数关联值的,这里用变量i表示。

    由于第一个table前面没有打印项,不必为这个打印项设置关联,所以这里单独把第一个table放在前面,不想给它加不必要的样式。
    j计数table的div的,从2开始有table的连续关联,这里循环5个表格,所以一直循环到5,这里用小于6代表循环条件,循环到5的时候,再加1,就是6了,6不小于6,所以终止循环。
    j是table计数,从2到5,除了第一个不需要设置关联的table外,都循环上。
    i是设置关联序号的,循环到第5个table,看一下第五个table应该关联第几个打印项,第五个table前面有四组table+text组合,4*2=8,8-1=7,所以第i是到最后一个是7。

    设置i=-1,然后在循环里加2,就能得到需要的序号:1,3,5,7。
    如果不想初始值等于负数,也可以加判断,把第一个提出来,也可以用这个一个循环的。

    测试例子地址:

    测试代码:

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>lodop打印测试</title>
    <script language="javascript" src="LodopFuncs.js"></script>
    </head>
    <body>
    <div id="div1">
    <table border=1 cellSpacing=0 cellPadding=1 width="100%" style="border-collapse:collapse;background-color:#ffcccc;text-align:center;">
    <tr>
        <td colspan="2">第一个表格的标题</td>
    </tr>
    <tr>
        <td>第一个表格</td>
        <td>第一个表格</td>
    </tr>
    </table>
    </div>
    <p></p>
    <div id="div2">
    <table border=1 cellSpacing=0 cellPadding=1 width="100%" style="border-collapse:collapse;background-color:#66ccff;text-align:center;">
    <tr>
        <td colspan="2">第二个表格的标题</td>
    </tr>
    <tr>
        <td>第二个表格</td>
        <td>第二个表格</td>
    </tr>
    <tr>
        <td>第二个表格</td>
        <td>第二个表格</td>
    </tr>
    </table>
    </div>
    <p></p>
    <div id="div3">
    <table border=1 cellSpacing=0 cellPadding=1 width="100%" style="border-collapse:collapse;background-color:#ffff66;text-align:center;">
    <tr>
        <td colspan="2">第三个表格的标题</td>
    </tr>
    <tr>
        <td>第三个表格</td>
        <td>第三个表格</td>
    </tr>
    </table>
    </div>
    <p></p>
    <div id="div4">
    <table border=1 cellSpacing=0 cellPadding=1 width="100%" style="border-collapse:collapse;background-color:#00ff00;text-align:center;">
    <tr>
        <td colspan="4">第四个表格的标题</td>
    </tr>
    <tr>
        <td>第四个表格</td>
        <td>第四个表格</td>
    </tr>
    </table>
    </div>
    <p></p>
    <div id="div5">
    <table border=1 cellSpacing=0 cellPadding=1 width="100%" style="border-collapse:collapse;background-color:#996633;text-align:center;">
    <tr>
        <td colspan="4">第五个表格的标题</td>
    </tr>
    <tr>
        <td>第五个表格</td>
        <td>第五个表格</td>
    </tr>
    </table>
    </div>
    <p></p>
    连续关联多个表格<br>
    <p><a href="javascript:prn1_preview()">四个表格关联打印预览(按顺序序号)</a></p>
    PS:按-1关联前一项,这种也可以。<br>
    <br>
    <p><a href="javascript:prn2_preview()">每个表格跟着一个text打印项(注意序号)</a></p>
    <p><a href="javascript:prn2_design()">进入打印设计,左侧有打印项列表</a></p>
    <p><a href="javascript:prn3_preview()">五个表格关联,for循环输出</a></p>
    <br>
    
    <script language="javascript" type="text/javascript">   
            var LODOP; //声明为全局变量 
        function prn1_preview() {    
    LODOP=getLodop();         
    LODOP.PRINT_INIT("");
    LODOP.ADD_PRINT_TABLE(20,20,300,"100%",document.getElementById("div1").innerHTML);
    LODOP.ADD_PRINT_TABLE(40,0,300,"100%",document.getElementById("div2").innerHTML);
    LODOP.SET_PRINT_STYLEA(0,"LinkedItem",1);
    LODOP.ADD_PRINT_TABLE(40,0,300,"100%",document.getElementById("div3").innerHTML);
    LODOP.SET_PRINT_STYLEA(0,"LinkedItem",2);
    LODOP.ADD_PRINT_TABLE(40,0,300,"100%",document.getElementById("div4").innerHTML);
    LODOP.SET_PRINT_STYLEA(0,"LinkedItem",3);
    LODOP.PREVIEW();    
        };
        function creat_page() {    
    LODOP=getLodop();         
    LODOP.PRINT_INIT("");
    LODOP.ADD_PRINT_TABLE(20,20,300,"100%",document.getElementById("div1").innerHTML);//第一个打印项
      LODOP.ADD_PRINT_TEXT(10,0,100,20,"收件人:1号");//第二个打印项
      LODOP.SET_PRINT_STYLEA(0,"LinkedItem",-1);
    LODOP.ADD_PRINT_TABLE(40,0,300,"100%",document.getElementById("div2").innerHTML);//第三个打印项
    LODOP.SET_PRINT_STYLEA(0,"LinkedItem",1);//关联第一个表格,第一个表格是第一个打印项
      LODOP.ADD_PRINT_TEXT(10,0,100,20,"收件人:2号");//第四个打印项
      LODOP.SET_PRINT_STYLEA(0,"LinkedItem",-1); 
    LODOP.ADD_PRINT_TABLE(40,0,300,"100%",document.getElementById("div3").innerHTML);//第五个打印项
    LODOP.SET_PRINT_STYLEA(0,"LinkedItem",3);//关联第二个表格,第二个表格是第三个打印项
      LODOP.ADD_PRINT_TEXT(10,0,100,20,"收件人:3号");//第六个打印项
      LODOP.SET_PRINT_STYLEA(0,"LinkedItem",-1); 
    LODOP.ADD_PRINT_TABLE(40,0,300,"100%",document.getElementById("div4").innerHTML);//第七个打印项
    LODOP.SET_PRINT_STYLEA(0,"LinkedItem",5);//关联第三个表格,第三个表格是第五个打印项
      LODOP.ADD_PRINT_TEXT(10,0,100,20,"收件人:4号");//第六个打印项
      LODOP.SET_PRINT_STYLEA(0,"LinkedItem",-1);     
        };
    function prn2_preview() {
    creat_page();
    LODOP.PREVIEW();
    };
    function prn2_design() {
    creat_page();
    LODOP.PRINT_DESIGN();
    };
    
    function prn3_preview() {
    LODOP=getLodop(); 
    LODOP.PRINT_INIT("");
    LODOP.ADD_PRINT_TABLE(20,20,300,"100%",document.getElementById("div1").innerHTML);//第一个打印项
      LODOP.ADD_PRINT_TEXT(10,0,100,20,"收件人:1号");//第二个打印项
      LODOP.SET_PRINT_STYLEA(0,"LinkedItem",-1);
      var i,j;
      i=-1;
    for(j=2;j<6;j++)
    {
    i=i+2;
    LODOP.ADD_PRINT_TABLE(40,0,300,"100%",document.getElementById("div"+j).innerHTML);
    console.log("div数值:"+j+",i的数值");
    LODOP.SET_PRINT_STYLEA(0,"LinkedItem",i);
    LODOP.ADD_PRINT_TEXT(10,0,100,20,"收件人:"+j+"");
    console.log("LinkedItem数值:"+i+",i的数值");
    LODOP.SET_PRINT_STYLEA(0,"LinkedItem",-1);
    }
    LODOP.PRINT_DESIGN();
    };
    </script> 
    </body>

    图示:

  • 相关阅读:
    七easy网络陷阱上当
    移动端--web开展
    ContentType是否大小写区分?
    NYOJ 24 素数的距离问题
    Emoji:搜索将与您找到表情符号背后的故事
    Cocos2d-X之LUA注意事项
    [Angular] ChangeDetection -- onPush
    [Node.js] Build microservices in Node.js with micro
    [Angular] Scrolling the Message List To the Bottom Automatically Using OnChanges
    [Angular] Ngrx/effects, Action trigger another action
  • 原文地址:https://www.cnblogs.com/huaxie/p/13180618.html
Copyright © 2011-2022 走看看