LODOP中带caption的表格被关联并次页偏移测试

ADD_PRINT_TABLE中的thead和tfoot可以每页输出，后面的打印项关联表格，可以紧跟着表格，实现在表格后面紧跟着输出内容的效果，表格可以自动分页，并总是跟在表格后面，在表格最后输出。table相关博文：LODOP表格table简短问答及相关博文、

例如，在table后面紧跟着输出一段htm超文本内容，由于表格是不固定的，有时候表格内容多有时候少，可能有时候正好在最后一页，后面的htm超文本盛放不开，也需要自动分页了。

表格中由于第一页有标题，常用到次页偏移，让除第一页后的表格能提上去，避免后面的自动分页上方空白。

如果有table中有caption，注意该caption也是表格内部的高度，次页偏如果想很靠上，也会把caption的距离偏移上，但是其实caption是表格打印项的高度，而后面的htm由于关联前面的表格，形成关联串，也会跟着前面的table的偏移距离进行偏移，但是后面的htm是没有caption的，所以就会导致htm偏移出纸张外的情况。

解决方法：
建议把caption放到外面，caption单独做成打印项，或者和前面的标题打印项等做成一个超文本打印项，不要放在自动分页并进行次页偏移的table打印项里面。

（如果最后的htm不是刚好最后页不够，进行自动分页，是不会有影响的，但是如果刚好遇到最后跟着的html进行自动分页，而且需要偏移到紧靠纸张上方，带着caption就会有影响，因此去掉caption是很好的方法。）

关于html代码的排查和定位到和什么有关，可以通过做简单例子排查和什么有关，很多开发人员的内容很多，带有很多样式等，一眼看上去很难发现和什么有关，可以通过做简单例子或删减进行排查，否则此问题很可能会被误认为和偏移或关联有关，通过做简单例子我测试发现简单例子都是正常的，然后通过偏移值调整发现距离的差异，然后又逐步排查和简单例子不同的地方，找到了这个capiton导致的偏移高度。

测试代码：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WEB打印控件LODOP</title>
<script language="javascript" src="LodopFuncs.js"></script>
</head>
<body>
<div id="p">
<table border=1 style="border-collapse:collapse;" width="150cm">
<caption>表格的标题</caption><!--多余的高度-->
<thead>
<tr>
    <td height="5cm">A1head</td>
    <td height="5cm">A2head</td>
</tr>
</thead>
<tr>
    <td height="150cm">B1</td>
    <td height="150cm">B2</td>
</tr>
<tr>
    <td height="150cm">C1</td>
    <td height="150cm">C2</td>
</tr>
<tr>
    <td height="15cm">D1</td>
    <td height="15cm">D2</td>
</tr>
<tfoot>
<tr>
    <td height="5cm">E1foot</td>
    <td height="5cm">E2foot</td>
</tfoot>
</tr>
</table>
</div>

<div id="p2">
<table border=1 style="border-collapse:collapse;" width="150cm">
<thead>
<tr>
    <td height="5cm">A1head</td>
    <td height="5cm">A2head</td>
</tr>
</thead>
<tr>
    <td height="150cm">B1</td>
    <td height="150cm">B2</td>
</tr>
<tr>
    <td height="150cm">C1</td>
    <td height="150cm">C2</td>
</tr>
<tr>
    <td height="15cm">D1</td>
    <td height="15cm">D2</td>
</tr>
<tfoot>
<tr>
    <td height="5cm">E1foot</td>
    <td height="5cm">E2foot</td>
</tfoot>
</tr>
</table>
</div>

<div id="last">
<table border=1 style="border-collapse:collapse;">
<tr>
    <td>最后11</td>
    <td>最后11</td>
</tr>
<tr>
    <td>最后22</td>
    <td>最后22</td>
</tr>
<tr>
    <td>最后33</td>
    <td>最后33</td>
</tr>
</table>
</div>
<a href="javascript:prn0_preview()">测试紧跟关联表格后面的htm自动分页（带caption)</a><br>
<a href="javascript:prn01_preview()">加大偏移值（带caption)</a><br>
<a href="javascript:prn1_preview()">测试紧跟关联表格后面的htm自动分页</a><br>
<script language="javascript" type="text/javascript">   
        var LODOP; //声明为全局变量 
        function prn0_preview() {
        LODOP=getLodop(); 
        LODOP.PRINT_INIT("");
        LODOP.SET_PRINT_PAGESIZE(1,1000,1000,"");
        LODOP.ADD_PRINT_TEXT(10,30,317,23,"第一页显示的标题内容");
        LODOP.ADD_PRINT_TABLE("10mm",0,"100%","100%",document.getElementById("p").innerHTML);
        LODOP.SET_PRINT_STYLEA(0,"Offset2Top",-20); //设置小的次页偏移，正常
        LODOP.ADD_PRINT_HTM(0,0,"100%","100%",document.getElementById("last").innerHTML+document.getElementById("last").innerHTML+document.getElementById("last").innerHTML);
        LODOP.SET_PRINT_STYLEA(0,"LinkedItem",-1);
        //LODOP.PRINT_DESIGN();
        LODOP.PREVIEW();    
    };
        function prn01_preview() {
        LODOP=getLodop(); 
        LODOP.PRINT_INIT("");
        LODOP.SET_PRINT_PAGESIZE(1,1000,1000,"");
        LODOP.ADD_PRINT_TEXT(10,30,317,23,"第一页显示的标题内容");
        LODOP.ADD_PRINT_TABLE("10mm",0,"100%","100%",document.getElementById("p").innerHTML);
        LODOP.SET_PRINT_STYLEA(0,"Offset2Top",-50); //设置大的次页偏移，次页偏移把caption的距离也偏移上
        LODOP.ADD_PRINT_HTM(0,0,"100%","100%",document.getElementById("last").innerHTML+document.getElementById("last").innerHTML+document.getElementById("last").innerHTML);//关联表格，形成关联串，top值偏移后整个串的起始位置
        LODOP.SET_PRINT_STYLEA(0,"LinkedItem",-1);
        //LODOP.PRINT_DESIGN();
        LODOP.PREVIEW();    
    };
        function prn1_preview() {
        LODOP=getLodop(); 
        LODOP.PRINT_INIT("");
        LODOP.SET_PRINT_PAGESIZE(1,1000,1000,"");
        LODOP.ADD_PRINT_TEXT(10,30,317,23,"第一页显示的标题内容");
        LODOP.ADD_PRINT_TABLE("10mm",0,"100%","100%",document.getElementById("p2").innerHTML);
        LODOP.SET_PRINT_STYLEA(0,"Offset2Top",-30); //去掉caption，不用再偏移caption的高度
        LODOP.ADD_PRINT_HTM(0,0,"100%","100%",document.getElementById("last").innerHTML+document.getElementById("last").innerHTML+document.getElementById("last").innerHTML);
        LODOP.SET_PRINT_STYLEA(0,"LinkedItem",-1);
        //LODOP.PRINT_DESIGN();
        LODOP.PREVIEW();    
    };
</script> 
</body>

图示：

posted @ 2019-10-14 10:17 花谢悦神阅读(517) 评论(0) 编辑收藏举报

刷新页面返回顶部

花谢悦神

LODOP中带caption的表格被关联并次页偏移测试

公告