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>

图示:

原文地址:https://www.cnblogs.com/huaxie/p/13180618.html