首页 发现 帮助
登录
dingcong
/
everlight.eap
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
分支: master
分支列表 标签列表
everlight.eap
/
backend
/
WebMainFrameForEap
/
wwwroot
/
Lodop6.226_Clodop4.096
/
PrintSample18.html

PrintSample18.html 9.7 KB
永久链接 文件历史 原始文件

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. 

  5. <title>WEB打印控件LODOP的样例十八:幅面高度不固定的票据打印</title>
    6. 

  6. 

  7. <script language="javascript" src="LodopFuncs.js"></script>
    8. 

  8. </head>
    9. 

  9. <body>
    10. 

  10. 

  11. <h2><font color="#009999">幅面高度不固定的票据打印：</font></h2>
    12. 

  12. 

  13. <p>用<a href="PrintSample5.html">样例五</a>介绍过的函数<font color="#0000FF" size="3">SET_PRINT_PAGESIZE</font>可以实现“纸张高度”按“打印内容自适应”</p>
    14. 

  14. <p>下面演示打印如下商品清单，操作前可以勾选不同的商品，观察打印预览效果：</p>
    15. 

  15. 

  16. <div id="splist" style="OVERFLOW-Y: scroll; WIDTH: 100%; POSITION: HEIGHT: 200px">
    17. 

  17.   <table class="tableframe2" style="WORD-BREAK: break-all" width="97%" align="center">
    18. 

  18.     <tbody>
    19. 

  19.       <tr id="id1" style="BACKGROUND-COLOR: #dae2ed">
    20. 

  20.         <td  align="middle" width="4%" height="25" bgcolor="#C0C0C0"></td>
    21. 

  21.         <td  align="center" width="15%" height="25" bgcolor="#C0C0C0">
    22. 

  22.           <p align="center"><b>商品编号</b></p>
    23. 

  23.         </td>
    24. 

  24.         <td  align="center" width="31%" bgcolor="#C0C0C0"><b>商品名称</b></td>
    25. 

  25.         <td  align="center" width="14%" bgcolor="#C0C0C0"><b>数量</b></td>
    26. 

  26.         <td  align="center" width="15%" bgcolor="#C0C0C0"><b>单价(元)</b></td>
    27. 

  27.       </tr>
    28. 

  28.       <tr    style="BACKGROUND-COLOR: #dae2ed">
    29. 

  29.         <td   width="4%" height="25"><input type="checkbox" id="CK1" value="ON" checked onClick="ReSumMoney()"></td>
    30. 

  30.         <td   width="15%" height="25"><input type="text" id="BH1" value="001" style="text-align:center;border:0px;background-color:#dae2ed" ></td> 
    31. 

  31.         <td  align="center" width="31%"><input type="text" id="MC1" value="商品A" style="text-align:center;border:0px;background-color:#dae2ed" ></td>
    32. 

  32.         <td  align="center" width="14%"><input type="text" id="SL1" value="1.00" style="text-align:center;border:0px;background-color:#dae2ed" ></td>
    33. 

  33.         <td  align="center" width="15%"><input type="text" id="DJ1" value="10.00" style="text-align:center;border:0px;background-color:#dae2ed" ></td>
    34. 

  34.       </tr>
    35. 

  35.       <tr style="BACKGROUND-COLOR: #dae2ed">
    36. 

  36.         <td   width="4%" height="25"><input type="checkbox" id="CK2" value="ON" onClick="ReSumMoney()"></td>
    37. 

  37.         <td   width="15%" height="25"><input type="text" id="BH2" value="002" style="text-align:center;border:0px;background-color:#dae2ed" ></td> 
    38. 

  38.         <td  align="center" width="31%"><input type="text" id="MC2" value="商品B" style="text-align:center;border:0px;background-color:#dae2ed" ></td>
    39. 

  39.         <td  align="center" width="14%"><input type="text" id="SL2" value="1.00" style="text-align:center;border:0px;background-color:#dae2ed" ></td>
    40. 

  40.         <td  align="center" width="15%"><input type="text" id="DJ2" value="20.00" style="text-align:center;border:0px;background-color:#dae2ed" ></td>
    41. 

  41.       </tr>  
    42. 

  42.       <tr style="BACKGROUND-COLOR: #dae2ed">
    43. 

  43.         <td   width="4%" height="25"><input type="checkbox" id="CK3" value="ON" checked onClick="ReSumMoney()"></td>
    44. 

  44.         <td   width="15%" height="25"><input type="text"    id="BH3" value="003" style="text-align:center;border:0px;background-color:#dae2ed" ></td> 
    45. 

  45.         <td  align="center" width="31%"><input type="text"  id="MC3" value="商品C" style="text-align:center;border:0px;background-color:#dae2ed" ></td>
    46. 

  46.         <td  align="center" width="14%"><input type="text"  id="SL3" value="1.00" style="text-align:center;border:0px;background-color:#dae2ed" ></td>
    47. 

  47.         <td  align="center" width="15%"><input type="text"  id="DJ3" value="70.00" style="text-align:center;border:0px;background-color:#dae2ed" ></td>
    48. 

  48.       </tr>        
    49. 

  49.       <tr style="BACKGROUND-COLOR: #dae2ed">
    50. 

  50.         <td   width="4%" height="25"><input type="checkbox" id="CK4" value="ON" checked onClick="ReSumMoney()"></td>
    51. 

  51.         <td   width="15%" height="25"><input type="text"    id="BH4" value="004" style="text-align:center;border:0px;background-color:#dae2ed" ></td> 
    52. 

  52.         <td  align="center" width="31%"><input type="text"  id="MC4" value="商品D" style="text-align:center;border:0px;background-color:#dae2ed" ></td>
    53. 

  53.         <td  align="center" width="14%"><input type="text"  id="SL4" value="1.00" style="text-align:center;border:0px;background-color:#dae2ed" ></td>
    54. 

  54.         <td  align="center" width="15%"><input type="text"  id="DJ4" value="25.00" style="text-align:center;border:0px;background-color:#dae2ed" ></td>
    55. 

  55.       </tr>   
    56. 

  56.       <tr style="BACKGROUND-COLOR: #dae2ed">
    57. 

  57.         <td   width="4%" height="25"><input type="checkbox" id="CK5" value="ON" onClick="ReSumMoney()"></td>
    58. 

  58.         <td   width="15%" height="25"><input type="text"    id="BH5" value="005" style="text-align:center;border:0px;background-color:#dae2ed" ></td> 
    59. 

  59.         <td  align="center" width="31%"><input type="text"  id="MC5" value="商品E" style="text-align:center;border:0px;background-color:#dae2ed" ></td>
    60. 

  60.         <td  align="center" width="14%"><input type="text"  id="SL5" value="1.00" style="text-align:center;border:0px;background-color:#dae2ed" ></td>
    61. 

  61.         <td  align="center" width="15%"><input type="text"  id="DJ5" value="40.00" style="text-align:center;border:0px;background-color:#dae2ed" ></td>
    62. 

  62.       </tr> 
    63. 

  63.       <tr style="BACKGROUND-COLOR: #dae2ed">
    64. 

  64.         <td   width="4%" height="25"><input type="checkbox" id="CK6" value="ON" onClick="ReSumMoney()"></td>
    65. 

  65.         <td   width="15%" height="25"><input type="text"    id="BH6" value="006" style="text-align:center;border:0px;background-color:#dae2ed" ></td> 
    66. 

  66.         <td  align="center" width="31%"><input type="text"  id="MC6" value="商品F" style="text-align:center;border:0px;background-color:#dae2ed" ></td>
    67. 

  67.         <td  align="center" width="14%"><input type="text"  id="SL6" value="1.00" style="text-align:center;border:0px;background-color:#dae2ed" ></td>
    68. 

  68.         <td  align="center" width="15%"><input type="text"  id="DJ6" value="36.50" style="text-align:center;border:0px;background-color:#dae2ed" ></td>
    69. 

  69.       </tr>
    70. 

  70.       <tr style="BACKGROUND-COLOR: #dae2ed">
    71. 

  71.         <td   width="4%" height="25"><input type="checkbox" id="CK7" value="ON" onClick="ReSumMoney()"></td>
    72. 

  72.         <td   width="15%" height="25"><input type="text"    id="BH7" value="007" style="text-align:center;border:0px;background-color:#dae2ed" ></td> 
    73. 

  73.         <td  align="center" width="31%"><input type="text"  id="MC7" value="商品G" style="text-align:center;border:0px;background-color:#dae2ed" ></td>
    74. 

  74.         <td  align="center" width="14%"><input type="text"  id="SL7" value="1.00" style="text-align:center;border:0px;background-color:#dae2ed" ></td>
    75. 

  75.         <td  align="center" width="15%"><input type="text"  id="DJ7" value="60.00" style="text-align:center;border:0px;background-color:#dae2ed" ></td>
    76. 

  76.       </tr> 
    77. 

  77.     </tbody>
    78. 

  78.   </table>
    79. 

  79. </div>
    80. 

  80. <table width="874">
    81. 

  81.   <tr>
    82. 

  82.     <td align="right" width="371" height="26">
    83. 

  83.       <p align="left"></td>
    84. 

  84.     <td align="right" width="78"><b>收银员:</b></td>
    85. 

  85.     <td align="right" width="146">
    86. 

  86.       <p align="left">0018</td>
    87. 

  87.     <td align="right" width="99"><b>合计金额:</b></td>
    88. 

  88.     <td align="right" width="138">
    89. 

  89.       <p align="left"><input type="text"  id="HJ" value="105.00" style="border:0px;"  size="20" name="T11"></p>
    90. 

  90.     </td>
    91. 

  91.   </tr>
    92. 

  92. </table>
    93. 

  93. <p><font color="#009999" size="3">现在开始</font><font size="2"><input type="button" value="打印预览" onClick="MyPreview()"><br><br></font>
    94. 

  94. </p>
    95. 

  95. <p><a href="PrintSampIndex.html">&lt;&lt;回样例目录</a>
    96. 

  96. </p>
    97. 

  97. <script language="javascript" type="text/javascript"> 
    98. 

  98.         var LODOP; //声明为全局变量
    99. 

  99. 	function ReSumMoney() {	
    100. 

  100. 		var fSumvalue=0;
    101. 

  101. 		for (i = 1; i < 8; i++) {
    102. 

  102. 			if (document.getElementById("CK"+i).checked) {
    103. 

  103.   				fSumvalue=fSumvalue+parseFloat(document.getElementById("DJ"+i).value);
    104. 

  104. 			}			 
    105. 

  105. 		}	
    106. 

  106. 		document.getElementById("HJ").value=fSumvalue.toFixed(2);
    107. 

  107. 	};
    108. 

  108. 	function MyPreview() {	
    109. 

  109. 		AddTitle();
    110. 

  110. 		var iCurLine=80;//标题行之后的数据从位置80px开始打印
    111. 

  111. 		for (i = 1; i < 8; i++) {
    112. 

  112. 			if (document.getElementById("CK"+i).checked) {				
    113. 

  113. 				LODOP.ADD_PRINT_TEXT(iCurLine,15,100,20,document.getElementById("BH"+i).value);
    114. 

  114. 				LODOP.ADD_PRINT_TEXT(iCurLine,149,100,20,document.getElementById("MC"+i).value);
    115. 

  115. 				LODOP.ADD_PRINT_TEXT(iCurLine,289,100,20,document.getElementById("SL"+i).value);
    116. 

  116. 				LODOP.ADD_PRINT_TEXT(iCurLine,409,100,20,document.getElementById("DJ"+i).value);
    117. 

  117. 				iCurLine=iCurLine+25;//每行占25px
    118. 

  118. 			}			 
    119. 

  119. 		}		
    120. 

  120. 		LODOP.ADD_PRINT_LINE(iCurLine,14,iCurLine,510,0,1);
    121. 

  121. 		LODOP.ADD_PRINT_TEXT(iCurLine+5,20,300,20,"打印时间："+(new Date()).toLocaleDateString()+" "+(new Date()).toLocaleTimeString());
    122. 

  122.                 LODOP.ADD_PRINT_TEXT(iCurLine+5,346,150,20,"合计金额："+document.getElementById("HJ").value);				
    123. 

  123. 		LODOP.SET_PRINT_PAGESIZE(3,1385,45,"");//这里3表示纵向打印且纸高“按内容的高度”；1385表示纸宽138.5mm；45表示页底空白4.5mm
    124. 

  124. 		LODOP.PREVIEW();	
    125. 

  125. 	};
    126. 

  126. 	function AddTitle(){	
    127. 

  127. 		LODOP=getLodop();  
    128. 

  128. 		LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_不同高度幅面");
    129. 

  129. 		LODOP.ADD_PRINT_TEXT(15,102,355,30,"北京市东城区沃乐福商城收款票据");
    130. 

  130. 		LODOP.SET_PRINT_STYLEA(1,"FontSize",13);
    131. 

  131. 		LODOP.SET_PRINT_STYLEA(1,"Bold",1);
    132. 

  132. 		LODOP.ADD_PRINT_TEXT(50,15,100,20,"商品编号");
    133. 

  133. 		LODOP.SET_PRINT_STYLEA(2,"FontSize",10);
    134. 

  134. 		LODOP.SET_PRINT_STYLEA(2,"Bold",1);
    135. 

  135. 		LODOP.ADD_PRINT_TEXT(50,149,100,20,"商品名称");
    136. 

  136. 		LODOP.SET_PRINT_STYLEA(3,"FontSize",10);
    137. 

  137. 		LODOP.SET_PRINT_STYLEA(3,"Bold",1);
    138. 

  138. 		LODOP.ADD_PRINT_TEXT(50,289,100,20,"商品数量");
    139. 

  139. 		LODOP.SET_PRINT_STYLEA(4,"FontSize",10);
    140. 

  140. 		LODOP.SET_PRINT_STYLEA(4,"Bold",1);
    141. 

  141. 		LODOP.ADD_PRINT_TEXT(50,409,100,20,"单价(元)");
    142. 

  142. 		LODOP.SET_PRINT_STYLEA(5,"FontSize",10);
    143. 

  143. 		LODOP.SET_PRINT_STYLEA(5,"Bold",1);
    144. 

  144. 		LODOP.ADD_PRINT_LINE(72,14,73,510,0,1);
    145. 

  145. 	};	
    146. 

  146. </script> 
    147. 

  147. 

  148. </body>
    149. 

  149. </html>
    150.