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也会保持原来的宽度，单元格保持原来的宽度。

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

Lodop打印表格带页头页尾自动分页每页显示头尾
Lodop中有两种专门给超文本表格的方式,ADD_PRINT_TABLE和ADD_PRINT_TBURL,该方式只能用于单个表格,表格外的内容不显示,是专门用于打印html超文本表格的.使用这两个语句 ...
Lodop打印表格带页头页尾高度是否包含页头页尾
通过设置TableHeightScope,可以实现对ADD_PRINT_TABLE,表格带页头页尾,查看本博客另一篇博文:Lodop打印表格带页头页尾自动分页每页显示头尾超文本超过打印项高度,会自 ...
Lodop打印表格带页头页尾高度是否包含页头页尾转载
通过设置TableHeightScope,可以实现对ADD_PRINT_TABLE,表格带页头页尾,查看本博客另一篇博文:Lodop打印表格带页头页尾自动分页每页显示头尾超文本超过打印项高度,会自 ...
js前台调用lodop打印
lodop简单介绍 lodop的打印功能已经非常强大,也在带web端的图形界面,可以供用户使用.使用js在前台调用lodop打印,一般分为两种方法: 1:特殊的指令打印,这种打印方式,是采用的与js无 ...
Lodop打印控件设置表格次页偏移
Lodop打印控件有很好的自动分页功能,超文本table表格一页装不下,自动分到第二页,第三页……通常表格之前还会有一些内容,比如标题,制表人名称日期什么的杂七杂八的东西,这种东西会占用一定的空间,这 ...
LODOP关联后眉脚条码的遮挡的一种情况
前面的博文中,有介绍层级关系,最先输出的打印项在下层,后输出的在上层,但是最近发现了一种例外,就是前面有关联的情况下,后面把一个条码设置为页眉页脚项,眉脚项和前面关联其他的项的那个项位置重合,虽然这个 ...
Web打印控件Lodop实现表格物流单的打印
Web打印控件Lodop实现表格物流单的打印一.lodop打印预览效果图 LODOP.PRINT_SETUP();打印维护效果图 LODOP.PREVIEW();打印预览图二.写在前面最近项目用 ...
LODOP打印超文本有边距不居中的情况2
之前的博文:LODOP打印项水平居中.之前的博文有介绍超文本和纯文本的居中方式,设置超文本打印项居中时,注意打印内容要在打印项本身宽度里居中.之前的博文超文本用的是个表格,而且表格本身没有margin ...
LODOP打印table表格宽度固定-超宽隐藏
之前有博文介绍关于超出div隐藏内容的:LODOP打印超过后隐藏内容样式里面提到了overflow:hidden;控制超出后隐藏,但是前面那篇用的是div,如果是在table中,由于table默认的t ...

随机推荐

Kubernetes 学习20调度器，预选策略及优选函数
一.概述 1.k8s集群中能运行pod资源的其实就是我们所谓的节点,也称为工作节点.master从本质上来讲,他其实是运行整个集群的控制平面组件的比如apiserver,scheal,controlm ...
2019.11.29 Mysql的数据操作
为名为name的表增加数据(插入所有字段) insert into name values(1,‘张三’,‘男’,20); 为名为name的表增加数据(插入部分字段) insert into name ...
Windows异常的分发处理流程
根据异常来源,一般分硬件异常和软件异常,它们处理的流程大致一样,下面简单讲一下. 如果是硬件异常,CPU会根据中断类型号转而执行对应的中断处理程序.CPU会在IDT中查找对应的函数来处理,各个异常处理 ...
自行撰写Grasshopper电池
Grasshopper目前作为参数化设计是非常常用的工具,但是人们会经常碰到它提供的电池不能满足自己设计方案需求的情况,所以就需要自己创作电池,而最简单的一种方法就是自己写. 工具: Visual S ...
flutter 踩坑小计： amap_base 地图缩放 zoom 设置无效的问题
这种问题估计也就我这种菜鸡能遇到了,因为我问了一些大佬,他们完全没遇到这类的问题. 如果你也遇到了,希望这篇文章能帮到你,倘若还不能解决你的问题,可以留言,我们共同研究. 问题:同样的插件,为什么偏偏 ...
sys 模块常用方法
sys.argv 命令行参数List,第一个元素是程序本身路径 sys.modules.keys() 返回所有已经导入的模块列表 sys.exc_info() 获取当前正在处理的异常类,exc_typ ...
Oraclecloud创建时没有上传公钥的解决办法
https://blogs.oracle.com/cloud-infrastructure/recovering-opc-user-ssh-key-on-oracle-cloud-infrastruc ...
Spring boot Security 登陆安全配置
实现的效果访问url时,如果未登录时跳转到Login界面,要求用户登陆,如果登陆过返回请求的数据. 效果图访问数据时,未登录返回login界面登陆操作登陆成功进入登出界面登陆成功后再次访问数 ...
浅谈Linux环境下Socket选项的设置
0.前言 TCP/IP协议栈是Linux内核的重要组成部分和网络编程的基石,虽然Linux和BSD有很大的联系,但是对于某些Socket选项和内核操作仍然存在差异,因此文中适用场景均为CentOS环境 ...
rg.hibernate.NonUniqueObjectException: a different object with the same identifier value was already associated with the session:
原先跑TEST CASE的时候没有出错但是跑到整个程序里面,除了这个问题, 网上也找了下资料,说是用merge之类的可以解决,因为你这个update的obj和session里面的不用,所以导致此问题 ...

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

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

随机推荐

热门专题