LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

LODOP中WEB页面打印表格错位的几种情况

admin
2023年9月26日 1:2 本文热度 588

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


该文章在 2023/9/26 1:02:06 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved