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 ...
随机推荐
- BurpSuite Intruder模块匹配返回包内容
很多时候burpsuite intruder爆破我们是看返回包的长度,那么如何根据返回包的内容来做筛选呢? 这里我用的本地某cms环境做个演示 Intruder模块怎么用的不用介绍了吧 直接进入正题 ...
- Oracle 分区表中本地索引和全局索引的适用场景
背景 分区表创建好了之后,如果需要最大化分区表的性能就需要结合索引的使用,分区表有两种索引:本地索引和全局索引.既然存在着两种的索引类型,相信存在即合理.既然存在就会有存在的原因,也就是在特定的场景中 ...
- 020_Python3 File(文件) 方法
1.open() 方法 Python open() 方法用于打开一个文件,并返回文件对象,在对文件进行处理过程都需要使用到这个函数,如果该文件无法被打开,会抛出 OSError. 注意:使用 open ...
- am335x system upgrade rootfs using yocto make rootfs(十二)
1 Scope of Document This document describes how to make am335x arago rootfs using ycoto project ...
- 【EF】Entity Framework使用
一.EF框架之三种模式 Entity Framework是ORMapping的一种具体实现,那ORMapping又是什么呢? ORM--ObjectRelation Mapping,即对象关系映射框架 ...
- P1453 城市环路
题目背景 一座城市,往往会被人们划分为几个区域,例如住宅区.商业区.工业区等等.B市就被分为了以下的两个区域——城市中心和城市郊区.在着这两个区域的中间是一条围绕B市的环路,环路之内便是B市中心. 题 ...
- IntelliJ IDEA 2017 MySQL5 绿色版 Spring 4 Mybatis 3 配置步骤详解(二)
前言 继续上一篇安装教程 首先是MySQL绿色版安装之后其他组件安装,如果篇幅较长会分为多篇深入讲解,随笔属于学习笔记诸多错误还望指出 共同学习. MySQL 5.7 绿色版 我本地安装的是 ...
- Strategic game(树形DP入门）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1054 题目大意:一棵树,要放置哨兵,要求最少放置多少哨兵能监视到所有的结点 题目分析: 放置哨兵无非两 ...
- ubuntu 14.04 系统配置磁盘，CPU，内存，硬盘信息查看
Linux查看物理CPU个数.核数.逻辑CPU个数# 总核数 = 物理CPU个数 X 每颗物理CPU的核数 # 总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU的核数 X 超线程数 查看分区磁盘 ...
- SQL题(子文章)(持续更新)
-----> 总文章 入口 文章目录 [-----> 总文章 入口](https://blog.csdn.net/qq_37214567/article/details/90174445) ...