,,

LODOP中WEB頁(yè)面打印表格錯(cuò)位的幾種情況

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

admin

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

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

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

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

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

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

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

隨著紙張不同，錯(cuò)位的程度也不同，和瀏覽器窗口改變導(dǎo)致的錯(cuò)位一樣。
代碼圖示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>分析差異點(diǎn)，因?yàn)g覽器版本不同遵循的html標(biāo)準(zhǔn)不同，</td>  
            <td>條形碼</td> 
            <td>LODOP</td>
            <td>css樣式等盡量使用pt等絕對(duì)單位，不使用px等相對(duì)單位</td>
        </tr>
    </table>
    <table border=1 width="100%" style="border-collapse:collapse;text-align:center;">
        <tr>
            <td>分析差異點(diǎn)，因?yàn)g覽器版本不同遵循的html標(biāo)準(zhǔn)不同，造成某些標(biāo)簽屬性顯示有差異</td>  
            <td>條形碼</td> 
            <td>LODOP</td>
            <td>css樣式等盡量使用pt等絕對(duì)單位，不使用px等相對(duì)單位</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：瀏覽器頁(yè)面不錯(cuò)位，LODOP預(yù)覽發(fā)生錯(cuò)位。（雖然兩個(gè)表格樣式一樣，但是其中一個(gè)由于總寬度縮小導(dǎo)致了換行，兩個(gè)表格發(fā)生錯(cuò)位）

代碼：

<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;">分析差異點(diǎn)，因?yàn)g覽器版本不同遵循的html標(biāo)準(zhǔn)不同</td>  
            <td style="width:90px;">分析差異點(diǎn)</td> 
            <td style="width:100px;">排查樣式</td>
            <td style="width:90px;">在ie下不同版本仿真情況下驗(yàn)證差異</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;">分析差異點(diǎn)</td> 
            <td style="width:100px;">排查樣式</td>
            <td style="width:90px;">在ie下不同版本仿真情況下驗(yàn)證差異</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>

圖示：

該問(wèn)題也是 css樣式問(wèn)題，需要排查樣式，用不受容器影響的樣式，或根據(jù)紙張大小，設(shè)定對(duì)應(yīng)的樣式，而不是瀏覽器的大小。此外，出現(xiàn)其他樣式問(wèn)題時(shí)，也可用刪減樣式，做小例子等方式排查，個(gè)人是（排查方法：）先刪減排查，把能這個(gè)問(wèn)題以最簡(jiǎn)單的形式摘取處理，然后做例子對(duì)比，找到原因。因?yàn)槁犝f(shuō)樣式一模一樣，ie打開也正常，但lodop打印發(fā)生錯(cuò)位，比較奇怪，要了例子來(lái)試試，排查了一下，這種樣式確實(shí)有這個(gè)現(xiàn)象。

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

該文章在 2023/9/26 1:02:06 編輯過(guò)

關(guān)鍵字查詢

相關(guān)文章

正在查詢...

點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國(guó)內(nèi)大量中小企業(yè)的青睞。

點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場(chǎng)、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點(diǎn)，圍繞調(diào)度、堆場(chǎng)作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。

點(diǎn)晴WMS倉(cāng)儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購(gòu)管理,倉(cāng)儲(chǔ)管理,倉(cāng)庫(kù)管理,保質(zhì)期管理,貨位管理,庫(kù)位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。

點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi)，不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。

公交车上荫蒂添的好舒服的电影-公用玩物(np双xing总受)-公用小荡货芊芊-公与妇仑乱hd-攻把受做哭边走边肉楼梯play-古装一级淫片a免费播放口

LODOP中WEB頁(yè)面打印表格錯(cuò)位的幾種情況