LODOP打印表格错位的几种情况

在网页设计中，表格经常用到百分比，表格在浏览器中展示，这个百分比是相对于浏览器的。
还有div，各种浮动之类的相对位置，也有的用到百分比。
而在LODOP打印中，百分比是相对于纸张的。
LODOP中打印项的宽高也可以用百分比，如果内容再是百分比，那就是相对于纸张的，可实现纸张不同，都能满页打印的效果，但是随着纸张不同，内容在表格中的宽度高度变化，经常会导致变形。

表现为不同纸张效果不同，表格宽度和列宽不同，有时候自定义纸张没有生效，导致同一个任务同样代码，纸张之间有差异，可打区域有差异，就会影响样式。
这时候需要排查样式，以及样式是否生效，写法是否正确等，如何直接排查出样式是否和容器有关系？
可以进入打印设计，然后选中该超文本打印项，右键-设置属性里，找到实际代码，拷贝出来放到ie里，在ie里查看效果，然后拖动ie浏览器窗口，让浏览器窗口逐渐变小，变大，查看样式是否会受容器的影响。
（相关博文：Lodop打印控件传入css样式、看是否传入正确样式）
如果一个用户打印预览，发现div位置相互错位，tatble表格错位等，很可能是本身设置的css样式和容器有关，在浏览器和纸张中由于容器的位置，导致位置和样式差异。
例如：
该文代码图示1：table设置了宽度为100%，单元格没有设置宽度，两个表格内容稍有差异，就造成了表格错位。
该文代码图示2：table设置了宽度为100%，单元格设置了宽度，两个表格在浏览器里正常，但是纸张由于小于浏览器，导致换行，行数不同，导致两个表格错位。（该问题会表现为在ie浏览器里打开，两个表格是对齐正常的，但是在LODOP预览中发生错位。）PS：其实这个问题，在浏览器里，改变浏览器大小也能看到错位现象。

（由于该问题在ie浏览器打开直接查看表格是没有错位的，只在lodop语句的时候错位，所以容易被忽视，这个其实也是css样式问题，拖动浏览器大小其实也是能看到错位现象的。只是由于用ie直接打开是正常的无错位，所以经常被误认为样式没有问题。）要大范围的拖动，并且第一个单元格的内容导致了换行。一个换行一个没有换行，这两个样式一样的表格就会错位。

该问题可能和浏览器解析有关，实际单元格宽度没有完全生效，但是表格又设置了100%，拖动也影响了单元格。这个问题排查了一段时间才找到这个现象，感觉比较奇怪，可能和浏览器样式的优先级机制等有关。两个相同的表格，表格大小都是100%，样式一样，单元格宽度设置的也是一样的，算是样式一模一样的表格，但是根据内容差异，宽度拖动小导致其中一个表格换行，宽度增大不会错位都是一行，这个错位是浏览器宽度拖动的越能看出错位。

解决方法：1.尽量统一成一个表格。
2.查看lodop内部解析的html信息，见http://www.c-lodop.com/faq/pp8.html
排查样式问题，调试样式，更换样式。
用不随容器或内容导致样式不同的影响，不受容器影响，不受内容影响的样式。

不受容器影响的tabe样式：table标签本身加固定的宽度，每个单元格加固定的宽度。（这种容器怎么办，表格和单元格宽度都不会变）可查看相关博文：如何固定table表格宽度，样式不受容器影响（注意，宽度固定后，不能自适应纸张，宽度超过纸张不会显示，可根据纸张进行设计表格，而不是根据浏览器）

随着纸张不同，错位的程度也不同，和浏览器窗口改变导致的错位一样。
代码图示1：
代码：

<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="div1">
    <table border=1 width="100%" style="border-collapse:collapse;text-align:center;">
        <tr>
            <td>分析差异点，因浏览器版本不同遵循的html标准不同，</td>  
            <td>条形码</td> 
            <td>LODOP</td>
            <td>css样式等尽量使用pt等绝对单位，不使用px等相对单位</td>
        </tr>
    </table>
    <table border=1 width="100%" style="border-collapse:collapse;text-align:center;">
        <tr>
            <td>分析差异点，因浏览器版本不同遵循的html标准不同，造成某些标签属性显示有差异</td>  
            <td>条形码</td> 
            <td>LODOP</td>
            <td>css样式等尽量使用pt等绝对单位，不使用px等相对单位</td>
        </tr>
    </table>
</div>
<a href="javascript:prn1_preview()">600*1600纸张</a><br>
<a href="javascript:prn2_preview()">1200*1000纸张</a><br>
<script language="javascript" type="text/javascript">   
        var LODOP; //声明为全局变量 
    function prn1_preview() {
        LODOP=getLodop(); 
        LODOP.PRINT_INIT("");
        LODOP.SET_PRINT_PAGESIZE(1,600,1600,"");
        LODOP.ADD_PRINT_HTM(0,0,"100%","100%",document.getElementById("div1").innerHTML);
        LODOP.PRINT_DESIGN();
//        LODOP.PREVIEW();    
    };
    function prn2_preview() {
        LODOP=getLodop(); 
        LODOP.PRINT_INIT("");
        LODOP.SET_PRINT_PAGESIZE(1,1200,1000,"");
        LODOP.ADD_PRINT_HTM(0,0,"100%","100%",document.getElementById("div1").innerHTML);
        //LODOP.PRINT_DESIGN();
        LODOP.PREVIEW();    
    };
</script> 
</body>

代码1的图示1：

代码图示2：浏览器页面不错位，LODOP预览发生错位。（虽然两个表格样式一样，但是其中一个由于总宽度缩小导致了换行，两个表格发生错位）

代码：

<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="div1">
    <table border=1 cellSpacing=0 cellPadding=0 width="100%" style="border-collapse:collapse;">
        <tr>
            <td style="width:600px;">分析差异点，因浏览器版本不同遵循的html标准不同</td>  
            <td style="width:90px;">分析差异点</td> 
            <td style="width:100px;">排查样式</td>
            <td style="width:90px;">在ie下不同版本仿真情况下验证差异</td>
        </tr>
    </table>
    <table border=1 cellSpacing=0 cellPadding=0 width="100%" style="border-collapse:collapse;">
        <tr>
            <td style="width:600px;">分析</td>  
            <td style="width:90px;">分析差异点</td> 
            <td style="width:100px;">排查样式</td>
            <td style="width:90px;">在ie下不同版本仿真情况下验证差异</td>
        </tr>
    </table>
</div>
<a href="javascript:prn1_preview()">600*1600纸张</a><br>
<a href="javascript:prn2_preview()">1200*1000纸张</a><br>
<script language="javascript" type="text/javascript">   
        var LODOP; //声明为全局变量 
    function prn1_preview() {
        LODOP=getLodop(); 
        LODOP.PRINT_INIT("");
        LODOP.SET_PRINT_PAGESIZE(1,600,1600,"");
        LODOP.ADD_PRINT_HTM(0,0,"100%","100%",document.getElementById("div1").innerHTML);
        LODOP.PRINT_DESIGN();
//        LODOP.PREVIEW();    
    };
    function prn2_preview() {
        LODOP=getLodop(); 
        LODOP.PRINT_INIT("");
        LODOP.SET_PRINT_PAGESIZE(1,1200,1000,"");
        LODOP.ADD_PRINT_HTM(0,0,"100%","100%",document.getElementById("div1").innerHTML);
        //LODOP.PRINT_DESIGN();
        LODOP.PREVIEW();    
    };
</script> 
</body>

图示：

该问题也是 css样式问题，需要排查样式，用不受容器影响的样式，或根据纸张大小，设定对应的样式，而不是浏览器的大小。此外，出现其他样式问题时，也可用删减样式，做小例子等方式排查，个人是（排查方法：）先删减排查，把能这个问题以最简单的形式摘取处理，然后做例子对比，找到原因。因为听说样式一模一样，ie打开也正常，但lodop打印发生错位，比较奇怪，要了例子来试试，排查了一下，这种样式确实有这个现象。

进一步测试发现，当table表格加宽度为100%的时候，实际设置的单元格宽度是无效的，表格抵达了浏览器右侧布满状态。
当去掉table的百分之百宽后，table本身不设置宽度，单元格每个设置了宽度，宽度是有效的，但是如果把浏览器窗口拖小，还是能发现错位现象。
所以最好的保证table绝对不会变形的方法，就是给table标签本身设置固定的宽度，标签里每个单元格设置固定的宽度，这样的样式绝对不会变形，即使拖动浏览器，table也会保持原来的宽度，单元格保持原来的宽度。

posted @ 2019-06-19 11:01 花谢悦神阅读(4905) 评论(0) 编辑收藏举报

刷新页面返回顶部

花谢悦神

LODOP打印表格错位的几种情况

公告