在网页设计中，表格经常用到百分比，表格在浏览器中展示，这个百分比是相对于浏览器的。
还有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也会保持原来的宽度，单元格保持原来的宽度。

LODOP打印表格错位的几种情况的更多相关文章

  1. Lodop打印表格带页头页尾 自动分页每页显示头尾

    Lodop中有两种专门给超文本表格的方式,ADD_PRINT_TABLE和ADD_PRINT_TBURL,该方式只能用于单个表格,表格外的内容不显示,是专门用于打印html超文本表格的.使用这两个语句 ...

  2. Lodop打印表格带页头页尾 高度是否包含页头页尾

    通过设置TableHeightScope,可以实现对ADD_PRINT_TABLE,表格带页头页尾,查看本博客另一篇博文:Lodop打印表格带页头页尾 自动分页每页显示头尾 超文本超过打印项高度,会自 ...

  3. Lodop打印表格带页头页尾 高度是否包含页头页尾 转载

    通过设置TableHeightScope,可以实现对ADD_PRINT_TABLE,表格带页头页尾,查看本博客另一篇博文:Lodop打印表格带页头页尾 自动分页每页显示头尾 超文本超过打印项高度,会自 ...

  4. js前台调用lodop打印

    lodop简单介绍 lodop的打印功能已经非常强大,也在带web端的图形界面,可以供用户使用.使用js在前台调用lodop打印,一般分为两种方法: 1:特殊的指令打印,这种打印方式,是采用的与js无 ...

  5. Lodop打印控件设置表格次页偏移

    Lodop打印控件有很好的自动分页功能,超文本table表格一页装不下,自动分到第二页,第三页……通常表格之前还会有一些内容,比如标题,制表人名称日期什么的杂七杂八的东西,这种东西会占用一定的空间,这 ...

  6. LODOP关联后眉脚条码的遮挡的一种情况

    前面的博文中,有介绍层级关系,最先输出的打印项在下层,后输出的在上层,但是最近发现了一种例外,就是前面有关联的情况下,后面把一个条码设置为页眉页脚项,眉脚项和前面关联其他的项的那个项位置重合,虽然这个 ...

  7. Web打印控件Lodop实现表格物流单的打印

    Web打印控件Lodop实现表格物流单的打印 一.lodop打印预览效果图 LODOP.PRINT_SETUP();打印维护效果图 LODOP.PREVIEW();打印预览图 二.写在前面 最近项目用 ...

  8. LODOP打印超文本有边距不居中的情况2

    之前的博文:LODOP打印项水平居中.之前的博文有介绍超文本和纯文本的居中方式,设置超文本打印项居中时,注意打印内容要在打印项本身宽度里居中.之前的博文超文本用的是个表格,而且表格本身没有margin ...

  9. LODOP打印table表格宽度固定-超宽隐藏

    之前有博文介绍关于超出div隐藏内容的:LODOP打印超过后隐藏内容样式里面提到了overflow:hidden;控制超出后隐藏,但是前面那篇用的是div,如果是在table中,由于table默认的t ...

随机推荐

  1. 对日开发中 PG , PL , SE , PM 是什么

    PG(ProGramer)指程序员. 这类人才在企业中所占数量最多,通常占到整个项目员工数的70%,也是企业中最紧缺的一类职位,一般为具有专业知识的软件工程技术人员. PL(project leade ...

  2. 对数据仓库ODS DW DM的理解

    原文链接:https://www.jianshu.com/p/72e395d8cb33 今天看了一些专业的解释,还是对ODS.DW和DM认识不深刻,下班后花时间分别查了查它们的概念. ODS——操作性 ...

  3. MongoDB 常用操作命令大全

    一.数据库常用命令1.Help查看命令提示 复制代码 代码如下: helpdb.help();db.yourColl.help();db.youColl.find().help();rs.help() ...

  4. __try __except与__try __finally的嵌套使用以及__finally的调用时机

    原文:https://blog.csdn.net/SwordArcher/article/details/82465522 try-finally语句的语法与try-except很类似,稍有不同的是, ...

  5. 连接到 redis 服务

    连接到 redis 服务 <?php //连接本地的 Redis 服务 $redis = new Redis(); $redis->connect('127.0.0.1', 6379); ...

  6. Matlab画图的输出格式

    利用Matlab命令,可以输出.eps, .pdf格式的图形.有时候,在图形窗口直接保存会导致图形不完整,这时,可以用如下命令代替: saveas(p1, 't1.eps'); saveas(p1, ...

  7. shell编程练习题

    求2个数之和 计算1-100的和 将一目录下所有的文件的扩展名改为bak 编译当前目录下的所有.c文件: 打印root可以使用可执行文件数,处理结果: root's bins: 2306 打印当前ss ...

  8. STP生成树详解图

  9. linux 命令scp

    scp命令网络传输文件 上传文件 scp 文件名 usename@10.233.23.100:Data/ 上传文件夹到服务器 scp -r 文件夹(不带/)usename@10.233.23.100: ...

  10. 使用FCKeditor编辑器上传文件时中文文件名乱码

    修改:editor\filemanager\browser\default\frmupload.html 文件的编码改为UTF-8 实在不行:fckeditor/editor/filemanager/ ...