Lodop中WEB页面打印设计时如何固定table表格宽度,样式不受容器影响
当前位置:点晴教程→知识管理交流
→『 技术文档交流 』
之前有篇关于LODOP打印超文本表格,两个样式相同的表格,出现错位的情况。 想让样式不变形,完全按照代码的宽度,可:在table标签里添加宽度,单元格里加宽度。这种是不受容器影响的。如下面图示,按照纸张进行设计表格,而不是浏览器。 上面那个博文链接中, 如果table表格不设置宽度为100%,table表格不设置宽度,单元格设置具体的宽度,测试发现,浏览器中确实能正常显示单元格宽度,增大浏览器等没有问题,但是减小的时候,浏览器还是会自动对宽度进行缩小,也就是浏览器中的表格是这样的:table不设置宽度,浏览器宽度拖动减小,会自适应一样的表格宽度本身也会改变,即使每个单元格设置了具体的宽度数值,浏览器还是自适用。 如果想要去掉样式和容器的影响,就是把table标签本身设置上具体宽度,这样之后,即使浏览器怎么拖动,样式已经固定了,就不会受浏览器样式影响了。 不受容器影响,也就不会发生内容不同导致的错位现象。 <table border=1 cellSpacing=0 cellPadding=0 style="border-collapse:collapse;width:880px;"> <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> 打印代码:(纸张设置的较小,表格本身的宽度已经超过了纸张) 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(); }; 图示见后面,和后面的合成了一张图: 修改为固定宽度后,表格不会随着容器自适用了,如果想保留自适用,可以合成到一个表格里,或者根据纸张重新设计表格。 代码:(根据纸张设计表格),如该纸张宽度是600, LODOP.SET_PRINT_PAGESIZE中的纸张参数,默认单位是0.1mm,也就是纸张是60mm。 <table border=1 cellSpacing=0 cellPadding=0 style="border-collapse:collapse;width:170pt;"> <tr> <td style="width:70pt;">分析差异点,因浏览器版本不同遵循的html标准不同</td> <td style="width:50pt;">分析差异点</td> <td style="width:20pt;">排查样式</td> <td style="width:30pt;">在ie下不同版本仿真情况下验证差异</td> </tr> </table> 图示: table加具体宽度,单元格加具体宽度,宽度样式不受容器的影响,注意宽度超过纸张会不显示。 该文章在 2023/9/26 10:06:16 编辑过 |
关键字查询
相关文章
正在查询... |