123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532 |
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html>
- <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>
- <h2><font color="#009999">演示综合表格分页打印:</font></h2>
- <p>如下是几个div包裹的超文本内容,现在演示用这些内容组合起来打印输出<b>两个发货单</b>,点<a href="javascript:PreviewMytable();">打印预览</a>看一下。</p>
- <p>为了避免本文档太长,每个发货单都用div2当主体表格,该表格因超出纸高被自动分页,其它带颜色的div分别作为它们的页眉页脚。</p>
- <p>本例用<font color="#0000FF">NewPageA</font>对两个发货单进行了分页,眉脚对象与主体表格进行了关联。</p>
- <p>----------------------div1:------------------------------------------------------------------------------------</p>
- <div id="div1">
- <DIV style="LINE-HEIGHT: 30px" class=size16 align=center><STRONG><font color="#0000FF">销售发货单-01</font></STRONG></DIV>
- <TABLE border=0 cellSpacing=0 cellPadding=0 width="100%">
- <TBODY>
- <TR>
- <TD width="43%"><font color="#0000FF">所在店铺:<SPAN
- id=rpt_Pro_Order_List_ctl00_lbl_eShop_Name>雅瑞专卖店</SPAN></font></TD>
- <TD width="33%"><font color="#0000FF">发货单号:<SPAN >2011050810372</SPAN></font></TD>
- <TD><font color="#0000FF">快递单号:</font></TD></TR>
- <TR>
- <TD><font color="#0000FF">收 件 人:<SPAN >王斌</SPAN></font></TD>
- <TD><font color="#0000FF">网店单号:<SPAN>74235823905643</SPAN></font><font color="#0000FF"></font></TD>
- <TD><font color="#0000FF">发货日期:2011-5-10</font></TD></TR>
- <TR>
- <TD><font color="#0000FF">电话号码:<SPAN>13935429860 </SPAN></font></TD>
- <TD><font color="#0000FF">收件人ID:<SPAN>云星王斌</SPAN></font></TD>
- <TD><font color="#0000FF"> </font></TD></TR></TBODY></TABLE>
- </div>
- <p>----------------------div2:------------------------------------------------------------------------------------</p>
- <div id="div2">
- <TABLE border=1 cellSpacing=0 cellPadding=1 width="100%" style="border-collapse:collapse" bordercolor="#333333">
- <thead>
- <TR>
- <TD width="10%">
- <DIV align=center><b>表格页眉</b></DIV></TD>
- <TD width="25%">
- <DIV align=center><b>品名</b></DIV></TD>
- <TD width="10%">
- <DIV align=center><b>颜色</b></DIV></TD>
- <TD width="10%">
- <DIV align=center><b>规格</b></DIV></TD>
- <TD width="10%">
- <DIV align=center><b>数量</b></DIV></TD>
- <TD width="15%">
- <DIV align=center><b>单价</b></DIV></TD>
- <TD width="20%">
- <DIV align=center><b>金额</b></DIV></TD></TR>
- </thead>
- <TBODY>
- <TR>
- <TD > TB_AMJ006</TD>
- <TD >名称01</TD>
- <TD >浅灰色</TD>
- <TD >185/10</TD>
- <TD >1</TD>
- <TD >248.00</TD>
- <TD>248.00</TD></TR>
- <TR>
- <TD > </TD>
- <TD >名称02</TD>
- <TD > </TD>
- <TD > </TD>
- <TD >2</TD>
- <TD >50</TD>
- <TD>100</TD></TR>
-
- <tr>
- <TD > </TD>
- <TD >名称03</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD> </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称04</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称05</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD> </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称06</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称07</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD> </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称08</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称09</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD> </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称10</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称11</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD> </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称12</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称13</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD> </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称14</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称15</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD> </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称16</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称17</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD> </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称18</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称19</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD> </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称20</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称21</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD> </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称22</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称23</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD> </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称24</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称25</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD> </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称26</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称27</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD> </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称28</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称29</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD> </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称30</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称31</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD> </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称32</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称33</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD> </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称34</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称35</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD></TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称36</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称37</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD></TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称38</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称39</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD> </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称40</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称41</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD> </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称42</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD >123</TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称43</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD> </TD>
- </tr>
- <tr>
- <TD > </TD>
- <TD >名称44</TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD > </TD>
- <TD >10</TD>
- </tr>
- <tfoot>
- <tr>
- <TD ><b>表格页脚</b></TD>
- <TD ><b>本页动态合计</b></TD>
- <TD ><b> </b></TD>
- <TD tdata="pageNO" format="#" align="left">
- <p align="center"><b>第<font color="#0000FF">#</font>页</b></p>
- </TD>
- <TD tdata="pageCount" format="#" align="left">
- <p align="center"><b>总<font color="#0000FF">##</font>页</b></TD>
- <TD width="14%" align="right"> </TD>
- <TD width="19%" tdata="subSum" format="#,##0.00" align="right"><font color="#0000FF">###元</font></TD>
- </tr>
- </tfoot>
- </TABLE>
- </div>
- <p>----------------------div3:------------------------------------------------------------------------------------</p>
- <div id="div3">
- <DIV style="LINE-HEIGHT: 30px"
- align=center><font color="#0000FF">感谢您对我们雅瑞专卖店的支持,(发货单01的表格外“页脚”,紧跟表格)</font></DIV>
- </div>
- <p>----------------------div4:------------------------------------------------------------------------------------</p>
- <div id="div4">
- <DIV style="LINE-HEIGHT: 30px" class=size16 align=center><STRONG><font color="#FF0000">销售发货单-02</font></STRONG></DIV>
- <TABLE border=0 cellSpacing=0 cellPadding=0 width="100%">
- <TBODY>
- <TR>
- <TD width="43%"><font color="#FF0000">店铺名称:<SPAN
- id=rpt_Pro_Order_List_ctl00_lbl_eShop_Name><b>黄阁专卖店</b></SPAN></font></TD>
- <TD width="33%"><font color="#FF0000">物流单号:<SPAN >2011050810373</SPAN></font></TD>
- </TR>
- <TR>
- <TD><font color="#FF0000">收 货 人:<SPAN >刘波</SPAN></font></TD>
- <TD><font color="#FF0000">网店订单:<SPAN>74235823905644</SPAN></font></TD>
- </TR>
- </TBODY></TABLE>
- </div>
- <p>---------------------------------------------------------------------------------------------------------------</p>
- <p><a href="PrintSampIndex.html"><<回样例目录</a>
- </p>
- <script>
- function PreviewMytable(){
- var LODOP=getLodop();
- LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_分页打印综合表格");
- var strStyle="<style> table,td,th {border-width: 1px;border-style: solid;border-collapse: collapse}</style>"
- LODOP.ADD_PRINT_TABLE(128,"5%","90%",314,strStyle+document.getElementById("div2").innerHTML);
- LODOP.SET_PRINT_STYLEA(0,"Vorient",3);
- LODOP.ADD_PRINT_HTM(26,"5%","90%",109,document.getElementById("div1").innerHTML);
- LODOP.SET_PRINT_STYLEA(0,"ItemType",1);
- LODOP.SET_PRINT_STYLEA(0,"LinkedItem",1);
- LODOP.ADD_PRINT_HTM(444,"5%","90%",54,document.getElementById("div3").innerHTML);
- LODOP.SET_PRINT_STYLEA(0,"ItemType",1);
- LODOP.SET_PRINT_STYLEA(0,"LinkedItem",1);
- LODOP.NewPageA();
- LODOP.ADD_PRINT_TABLE(128,"5%","90%",328,strStyle+document.getElementById("div2").innerHTML);
- LODOP.SET_PRINT_STYLEA(0,"Vorient",3);
- LODOP.ADD_PRINT_HTM(26,"5%","90%",80,document.getElementById("div4").innerHTML);
- LODOP.SET_PRINT_STYLEA(0,"ItemType",1);
- LODOP.SET_PRINT_STYLEA(0,"LinkedItem",4);
- LODOP.ADD_PRINT_TEXT(460,96,"76.25%",20,"真诚祝您好远,欢迎下次再来!(发货单02的表格外“页脚”,紧跟表格)");
- LODOP.SET_PRINT_STYLEA(0,"LinkedItem",4);
- LODOP.SET_PRINT_STYLEA(0,"FontSize",12);
- LODOP.SET_PRINT_STYLEA(0,"FontColor","#FF0000");
- LODOP.SET_PRINT_STYLEA(0,"Alignment",2);
- LODOP.SET_PRINT_STYLEA(0,"ItemType",1);
- LODOP.SET_PRINT_STYLEA(0,"Horient",3);
- LODOP.ADD_PRINT_HTM(1,600,300,100,"总页号:<font color='#0000ff' format='ChineseNum'><span tdata='pageNO'>第##页</span>/<span tdata='pageCount'>共##页</span></font>");
- LODOP.SET_PRINT_STYLEA(0,"ItemType",1);
- LODOP.SET_PRINT_STYLEA(0,"Horient",1);
- LODOP.ADD_PRINT_TEXT(3,34,196,20,"总页眉:《两个发货单的演示》");
- LODOP.SET_PRINT_STYLEA(0,"ItemType",1);
- LODOP.PREVIEW();
- };
- </script>
-
- </body>
|