Lodop中WEB頁面打印設(shè)計時如何固定table表格寬度,樣式不受容器影響
當(dāng)前位置:點晴教程→知識管理交流
→『 技術(shù)文檔交流 』
之前有篇關(guān)于LODOP打印超文本表格,兩個樣式相同的表格,出現(xiàn)錯位的情況。 想讓樣式不變形,完全按照代碼的寬度,可:在table標(biāo)簽里添加寬度,單元格里加寬度。這種是不受容器影響的。如下面圖示,按照紙張進行設(shè)計表格,而不是瀏覽器。 上面那個博文鏈接中, 如果table表格不設(shè)置寬度為100%,table表格不設(shè)置寬度,單元格設(shè)置具體的寬度,測試發(fā)現(xiàn),瀏覽器中確實能正常顯示單元格寬度,增大瀏覽器等沒有問題,但是減小的時候,瀏覽器還是會自動對寬度進行縮小,也就是瀏覽器中的表格是這樣的:table不設(shè)置寬度,瀏覽器寬度拖動減小,會自適應(yīng)一樣的表格寬度本身也會改變,即使每個單元格設(shè)置了具體的寬度數(shù)值,瀏覽器還是自適用。 如果想要去掉樣式和容器的影響,就是把table標(biāo)簽本身設(shè)置上具體寬度,這樣之后,即使瀏覽器怎么拖動,樣式已經(jīng)固定了,就不會受瀏覽器樣式影響了。 不受容器影響,也就不會發(fā)生內(nèi)容不同導(dǎo)致的錯位現(xiàn)象。 <table border=1 cellSpacing=0 cellPadding=0 style="border-collapse:collapse;width:880px;"> <tr> <td style="width:600px;">分析差異點,因瀏覽器版本不同遵循的html標(biāo)準(zhǔn)不同</td> <td style="width:90px;">分析差異點</td> <td style="width:100px;">排查樣式</td> <td style="width:90px;">在ie下不同版本仿真情況下驗證差異</td> </tr> </table> 打印代碼:(紙張設(shè)置的較小,表格本身的寬度已經(jīng)超過了紙張) 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(); }; 圖示見后面,和后面的合成了一張圖: 修改為固定寬度后,表格不會隨著容器自適用了,如果想保留自適用,可以合成到一個表格里,或者根據(jù)紙張重新設(shè)計表格。 代碼:(根據(jù)紙張設(shè)計表格),如該紙張寬度是600, LODOP.SET_PRINT_PAGESIZE中的紙張參數(shù),默認單位是0.1mm,也就是紙張是60mm。 <table border=1 cellSpacing=0 cellPadding=0 style="border-collapse:collapse;width:170pt;"> <tr> <td style="width:70pt;">分析差異點,因瀏覽器版本不同遵循的html標(biāo)準(zhǔn)不同</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 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... |