亚洲乱色熟女一区二区三区丝袜,天堂√中文最新版在线,亚洲精品乱码久久久久久蜜桃图片,香蕉久久久久久av成人,欧美丰满熟妇bbb久久久

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

LODOP中WEB頁面打印表格錯位的幾種情況

admin
2023年9月26日 1:2 本文熱度 1687

在網(wǎng)頁設(shè)計中,表格經(jīng)常用到百分比,表格在瀏覽器中展示,這個百分比是相對于瀏覽器的。
還有div,各種浮動之類的相對位置,也有的用到百分比。
而在LODOP打印中,百分比是相對于紙張的。
LODOP中打印項的寬高也可以用百分比,如果內(nèi)容再是百分比,那就是相對于紙張的,可實現(xiàn)紙張不同,都能滿頁打印的效果,但是隨著紙張不同,內(nèi)容在表格中的寬度高度變化,經(jīng)常會導(dǎo)致變形。

表現(xiàn)為不同紙張效果不同,表格寬度和列寬不同,有時候自定義紙張沒有生效,導(dǎo)致同一個任務(wù)同樣代碼,紙張之間有差異,可打區(qū)域有差異,就會影響樣式。
這時候需要排查樣式,以及樣式是否生效,寫法是否正確等,如何直接排查出樣式是否和容器有關(guān)系?
可以進(jìn)入打印設(shè)計,然后選中該 超文本打印項,右鍵-設(shè)置屬性里,找到實際代碼 ,拷貝出來放到ie里,在ie里查看效果,然后拖動ie瀏覽器窗口,讓瀏覽器窗口逐漸變小,變大,查看樣式是否會受容器的影響。
(相關(guān)博文:Lodop打印控件傳入css樣式、看是否傳入正確樣式
如果一個用戶打印預(yù)覽,發(fā)現(xiàn)div位置相互錯位,tatble表格錯位等,很可能是本身設(shè)置的css樣式和容器有關(guān),在瀏覽器和紙張中由于容器的位置,導(dǎo)致位置和樣式差異。
例如:
該文代碼圖示1:table設(shè)置了寬度為100%,單元格沒有設(shè)置寬度,兩個表格內(nèi)容稍有差異,就造成了表格錯位。
該文代碼圖示2:table設(shè)置了寬度為100%,單元格設(shè)置了寬度,兩個表格在瀏覽器里正常,但是紙張由于小于瀏覽器,導(dǎo)致?lián)Q行,行數(shù)不同,導(dǎo)致兩個表格錯位。(該問題會表現(xiàn)為在ie瀏覽器里打開,兩個表格是對齊正常的,但是在LODOP預(yù)覽中發(fā)生錯位。)PS:其實這個問題,在 瀏覽器里,改變?yōu)g覽器大小也能看到錯位現(xiàn)象。

(由于該問題在ie瀏覽器打開直接查看表格是沒有錯位的,只在lodop語句的時候錯位,所以容易被忽視,這個其實也是css樣式問題,拖動瀏覽器大小其實也是能看到錯位現(xiàn)象的。只是由于用ie直接打開是正常的無錯位,所以經(jīng)常被誤認(rèn)為樣式?jīng)]有問題。)要大范圍的拖動,并且第一個單元格的內(nèi)容導(dǎo)致了換行。一個換行一個沒有換行,這兩個樣式一樣的表格就會錯位。

該問題可能和瀏覽器解析有關(guān),實際單元格寬度沒有完全生效,但是表格又設(shè)置了100%,拖動也影響了單元格。這個問題排查了一段時間才找到這個現(xiàn)象,感覺比較奇怪,可能和瀏覽器樣式的優(yōu)先級機(jī)制等有關(guān)。兩個相同的表格,表格大小都是100%,樣式一樣,單元格寬度設(shè)置的也是一樣的,算是樣式一模一樣的表格,但是根據(jù)內(nèi)容差異,寬度拖動小導(dǎo)致其中一個表格換行,寬度增大不會錯位都是一行,這個錯位是瀏覽器寬度拖動的越能看出錯位。

解決方法:1.盡量統(tǒng)一成一個表格。
2.查看lodop內(nèi)部解析的html信息,見http://www.c-lodop.com/faq/pp8.html
排查樣式問題,調(diào)試樣式 ,更換樣式。
用不隨容器或內(nèi)容導(dǎo)致樣式不同的影響,不受容器影響,不受內(nèi)容影響的樣式。

不受容器影響的tabe樣式:table標(biāo)簽本身加固定的寬度,每個單元格加固定的寬度。(這種容器怎么辦,表格和單元格寬度都不會變)可查看相關(guān)博文:如何固定table表格寬度,樣式不受容器影響(注意,寬度固定后,不能自適應(yīng)紙張,寬度超過紙張不會顯示,可根據(jù)紙張進(jìn)行設(shè)計表格,而不是根據(jù)瀏覽器

隨著紙張不同,錯位的程度也不同,和瀏覽器窗口改變導(dǎo)致的錯位一樣。
代碼圖示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標(biāo)準(zhǔn)不同,</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標(biāo)準(zhǔn)不同,造成某些標(biāo)簽屬性顯示有差異</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預(yù)覽發(fā)生錯位。(雖然兩個表格樣式一樣,但是其中一個由于總寬度縮小導(dǎo)致了換行,兩個表格發(fā)生錯位)

代碼 :

<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標(biāo)準(zhǔn)不同</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樣式問題,需要排查樣式,用不受容器影響的樣式,或根據(jù)紙張大小,設(shè)定對應(yīng)的樣式,而不是瀏覽器的大小。此外,出現(xiàn)其他樣式問題時,也可用刪減樣式,做小例子等方式排查,個人是(排查方法:)先刪減排查,把能這個問題以最簡單的形式摘取處理,然后做例子對比,找到原因。因為聽說樣式一模一樣,ie打開也正常,但lodop打印發(fā)生錯位,比較奇怪,要了例子來試試,排查了一下,這種樣式確實有這個現(xiàn)象。

進(jìn)一步測試發(fā)現(xiàn),當(dāng)table表格加寬度為100%的時候,實際設(shè)置的單元格寬度是無效的,表格抵達(dá)了瀏覽器右側(cè)布滿狀態(tài)。
當(dāng)去掉table的百分之百寬后,table本身不設(shè)置寬度,單元格每個設(shè)置了寬度,寬度是有效的,但是如果把瀏覽器窗口拖小,還是能發(fā)現(xiàn)錯位現(xiàn)象。
所以最好的保證table絕對不會變形的方法,就是給table標(biāo)簽本身設(shè)置固定的寬度,標(biāo)簽里每個單元格設(shè)置固定的寬度,這樣的樣式絕對不會變形,即使拖動瀏覽器,table也會保持原來的寬度,單元格保持原來的寬度。


該文章在 2023/9/26 1:02:06 編輯過
關(guān)鍵字查詢
相關(guān)文章
正在查詢...
點晴ERP是一款針對中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。
點晴PMS碼頭管理系統(tǒng)主要針對港口碼頭集裝箱與散貨日常運作、調(diào)度、堆場、車隊、財務(wù)費用、相關(guān)報表等業(yè)務(wù)管理,結(jié)合碼頭的業(yè)務(wù)特點,圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體,是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點晴WMS倉儲管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務(wù)都免費,不限功能、不限時間、不限用戶的免費OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2025 ClickSun All Rights Reserved