LODOP中page-break-before:always給div分頁


Lodop中超過超文本打印項高度會自動分頁:Lodop打印控件 超文本自動分頁
Lodop中還有NewPage和NewPageA,用於手動分頁:Lodop強制分頁LODOP.NewPage()和LODOP.NewPageA() 
在超文本中,還可用page-break-before:always進行手動分頁,該方法需要預先在要打印的html超文本中設置好,注意:1.只有前后都有換行符的block元素才能用來分頁 2.分頁元素不能空,可以是空格或普通內容
本文是測試一下page-break-before:always的作用范圍,結果如圖:


給兩個div加了這個樣式,並在前后添加p標簽的普通內容,結果是分頁會在加了page-break-before:always這個樣式的東西后立刻分頁,對於該東西之前的內容不會分頁。
例如:給第一個小div加了該樣式,之前的內容沒有和這個div隔開,之后內容被隔開了。
給第二個小div加了該樣式,之前的內容沒有被隔開,之后的內容被隔開了。
由此可知,加了該樣式的元素之前的不會被隔開,之后的會,也就是加了這個樣式的元素,會和后面的隔開,單獨作為一頁,該元素后的內容被作為另起一頁
加了該樣式的div元素后的內容會另起一頁。

<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="dd">
<p>這是一個在div1外的普通內容</p>
<div style="page-break-after:always">
<table width="100" height="100" border="1">
<tr>
    <td width="50" height="50">aa</td>
    <td width="50" height="50">bb</td>
</tr>
</table>
</div>
<p>這是一個在div1和div2之間的普通內容</p>
<div style="page-break-after:always">
<table width="100" height="100" border="1">
<tr>
    <td width="50" height="50">cc</td>
    <td width="50" height="50">dd</td>
</tr>
</table>
</div>
<p>這是一個在div2之后的普通內容</p>
</div>
<a href="javascript:prn1_preview()">效果</a>
<script language="javascript" type="text/javascript">   
        var LODOP; //聲明為全局變量 
    function prn1_preview() {
        LODOP=getLodop(); 
        LODOP.PRINT_INIT("");
        LODOP.SET_PRINT_PAGESIZE(1,600,1000,"");
        LODOP.ADD_PRINT_HTM(10,10,410,"100%",document.getElementById("dd").innerHTML)
        LODOP.PRINT_DESIGN();
        //LODOP.PREVIEW();    
    };
</script> 
</body>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM