LODOP中WEB页面打印表格错位的几种情况
当前位置:点晴教程→知识管理交流
→『 技术文档交流 』
在网页设计中,表格经常用到百分比,表格在浏览器中展示,这个百分比是相对于浏览器的。 表现为不同纸张效果不同,表格宽度和列宽不同,有时候自定义纸张没有生效,导致同一个任务同样代码,纸张之间有差异,可打区域有差异,就会影响样式。 (由于该问题在ie浏览器打开直接查看表格是没有错位的,只在lodop语句的时候错位,所以容易被忽视,这个其实也是css样式问题,拖动浏览器大小其实也是能看到错位现象的。只是由于用ie直接打开是正常的无错位,所以经常被误认为样式没有问题。)要大范围的拖动,并且第一个单元格的内容导致了换行。一个换行一个没有换行,这两个样式一样的表格就会错位。 该问题可能和浏览器解析有关,实际单元格宽度没有完全生效,但是表格又设置了100%,拖动也影响了单元格。这个问题排查了一段时间才找到这个现象,感觉比较奇怪,可能和浏览器样式的优先级机制等有关。两个相同的表格,表格大小都是100%,样式一样,单元格宽度设置的也是一样的,算是样式一模一样的表格,但是根据内容差异,宽度拖动小导致其中一个表格换行,宽度增大不会错位都是一行,这个错位是浏览器宽度拖动的越能看出错位。 解决方法:1.尽量统一成一个表格。 不受容器影响的tabe样式:table标签本身加固定的宽度,每个单元格加固定的宽度。(这种容器怎么办,表格和单元格宽度都不会变)可查看相关博文:如何固定table表格宽度,样式不受容器影响(注意,宽度固定后,不能自适应纸张,宽度超过纸张不会显示,可根据纸张进行设计表格,而不是根据浏览器) 随着纸张不同,错位的程度也不同,和浏览器窗口改变导致的错位一样。 <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%的时候,实际设置的单元格宽度是无效的,表格抵达了浏览器右侧布满状态。 该文章在 2023/9/26 1:02:06 编辑过 |
关键字查询
相关文章
正在查询... |