صفحهٔ اصلی گشت‌و‌گذار راهنما
ورود
dingcong
/
everlight.eap
1
0
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
شاخه: master
شاخه‌ها تگ‌ها
everlight.eap
/
backend
/
WebMainFrameForEap
/
wwwroot
/
Lodop6.226_Clodop4.096
/
PrintSample22.html

PrintSample22.html 14 KB
لینک دائمی تاريخچه خام

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288 
  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

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

  5. <title>WEB打印控件LODOP的样例二十二:构建自己的纯WEB打印预览</title>
    6. 

  6. 

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

  8. </head>
    9. 

  9. <body>
    10. 

  10. <h2><font color="#009999">演示构建自己的纯WEB打印预览：</font></h2>
    11. 

  11. 

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

  13.   <table class="tableframe2" style="WORD-BREAK: break-all" width="97%" align="center" height="87">
    14. 

  14.     <tbody>
    15. 

  15.       <tr id="id1" style="BACKGROUND-COLOR: #dae2ed">
    16. 

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

  17.           <p align="center"><b>商品编号</b></p>
    18. 

  18.         </td>
    19. 

  19.         <td  align="center" width="31%" bgcolor="#C0C0C0" height="21"><b>商品名称</b></td>
    20. 

  20.         <td  align="center" width="14%" bgcolor="#C0C0C0" height="21"><b>数量</b></td>
    21. 

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

  22.       </tr>
    23. 

  23.       <tr    style="BACKGROUND-COLOR: #dae2ed">
    24. 

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

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

  26.         <td  align="center" width="14%" height="11"><input type="text" id="SL1" value="10.00" style="text-align:center;border:0px;background-color:#dae2ed" readonly=true></td>
    27. 

  27.         <td  align="center" width="15%" height="11"><input type="text" id="DJ1" value="500.00" style="text-align:center;border:0px;background-color:#dae2ed" readonly=true></td>
    28. 

  28.       </tr>
    29. 

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

  30.         <td   width="15%" height="1"><input type="text" id="BH2" value="002" style="text-align:center;border:0px;background-color:#dae2ed" readonly=true></td> 
    31. 

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

  32.         <td  align="center" width="14%" height="1"><input type="text" id="SL2" value="15.00" style="text-align:center;border:0px;background-color:#dae2ed" readonly=true></td>
    33. 

  33.         <td  align="center" width="15%" height="1"><input type="text" id="DJ2" value="20.00" style="text-align:center;border:0px;background-color:#dae2ed" readonly=true></td>
    34. 

  34.       </tr>  
    35. 

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

  36.         <td   width="15%" height="1"><input type="text"    id="BH3" value="003" style="text-align:center;border:0px;background-color:#dae2ed" readonly=true></td> 
    37. 

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

  38.         <td  align="center" width="14%" height="1"><input type="text"  id="SL3" value="6.00" style="text-align:center;border:0px;background-color:#dae2ed" readonly=true></td>
    39. 

  39.         <td  align="center" width="15%" height="1"><input type="text"  id="DJ3" value="400.00" style="text-align:center;border:0px;background-color:#dae2ed" readonly=true></td>
    40. 

  40.       </tr>        
    41. 

  41.     </tbody>
    42. 

  42.   </table>
    43. 

  43. </div>
    44. 

  44. <p>下面结合样例十六和十九的功能，设计出自己的预览界面（打印上面的商品卡片）：  
    45. 

  45. </p>
    46. 

  46. <table border="1" width="100%">
    47. 

  47.   <tr>
    48. 

  48.     <td width="6%" align="center"><a href="javascript:myAction1()">适高显示</a></td>
    49. 

  49.     <td width="6%" align="center"><a href="javascript:myAction2()">正常显示</a></td>
    50. 

  50.     <td width="6%" align="center"><a href="javascript:myAction3()">适宽显示</a></td>
    51. 

  51.     <td width="6%" align="center"><a href="javascript:myAction4()">拉近显示+</a></td>
    52. 

  52.     <td width="6%" align="center"><a href="javascript:myAction5()">推远显示-</a></td>
    53. 

  53.     <td width="6%" align="center">缩放打印
    54. 

  54. 	<select size="1" id="percent" onchange="myAction6()">
    55. 

  55.     	   <option value="0">30%</option>
    56. 

  56. 	   <option value="1">50%</option>
    57. 

  57.     	   <option value="2">60%</option>
    58. 

  58. 	   <option value="3">70%</option>
    59. 

  59.     	   <option value="4">80%</option>
    60. 

  60. 	   <option value="5">85%</option>
    61. 

  61.     	   <option value="6">90%</option>
    62. 

  62. 	   <option value="7">95%</option>
    63. 

  63.     	   <option value="8">100%</option>
    64. 

  64. 	   <option value="9">125%</option>
    65. 

  65. 	   <option value="10">150%</option>
    66. 

  66.     	   <option value="11">200%</option>
    67. 

  67. 	   <option value="12">按整宽</option>
    68. 

  68.     	   <option value="13">按整高</option>
    69. 

  69. 	   <option value="14" selected>按整页</option>
    70. 

  70. 	   <option value="15">整宽不变形</option>
    71. 

  71. 	   <option value="16">整高不变形</option>
    72. 

  72. 	   <option value="17">其它比例</option>
    73. 

  73. 	</select>
    74. 

  74.     </td>
    75. 

  75.     <td width="5%" align="center"><a href="javascript:myAction7()">首页</a></td>
    76. 

  76.     <td width="6%" align="center"><a href="javascript:myAction8()">上一页</a></td>
    77. 

  77.     <td width="6%" align="center"><a href="javascript:myAction9()">下一页</a></td>
    78. 

  78.     <td width="5%" align="center"><a href="javascript:myAction10()">尾页</a></td>
    79. 

  79.     <td width="6%" align="center">到:<input size=1 id="inputpage" value="1" oninput="myAction11()" onpropertychange="myAction11()"></input>页</td>
    80. 

  80.     <td width="7%" align="center"><a href="javascript:myAction12()">打印设置</a></td>
    81. 

  81.     <td width="7%" align="center"><a href="javascript:myAction13()">打印全部</a></td>
    82. 

  82.     <td width="7%" align="center"><a href="javascript:myAction14()">打印本页</a></td>
    83. 

  83.     <td width="9%" align="center"><a href="javascript:myAction15()">旋转(横打时)</a></td>
    84. 

  84.     <td width="9%" align="center"><a href="javascript:myAction16()">关闭</a></td>
    85. 

  85.   </tr>
    86. 

  86.   <tr>
    87. 

  87.     <td width="100%" colspan="16"> 
    88. 

  88. 	<object id="LODOP_X" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=100% height=500> 
    89. 

  89. 	        <param name="Color" value="#ADD8E6"> 
    90. 

  90. 		<embed id="LODOP_EM" TYPE="application/x-print-lodop" width=100% height=500 color="#ADD8E6"  PLUGINSPAGE="install_lodop32.exe"></embed>
    91. 

  91. 	</object> 
    92. 

  92.     </td>
    93. 

  93.   </tr>
    94. 

  94. </table>
    95. 

  95. 说实在的，我以上设计的预览界面很是一般，但你可以发挥超文本优势，构建出与众不同的预览界面。下面这些数据或许有用：
    96. 

  96. <p> 
    97. 

  97. <input type="button" value="获得纸张宽度(0.1mm):" onclick="javascript:getMyValue('PRINTSETUP_PAGE_WIDTH',document.getElementById('S1'))">     
    98. 

  98.   <input type="text" id="S1" size="20">         
    99. 

  99. </p>
    100. 

  100. <p> 
    101. 

  101. <input type="button" value="获得纸张高度(0.1mm):" onclick="javascript:getMyValue('PRINTSETUP_PAGE_HEIGHT',document.getElementById('S2'))">     
    102. 

  102.   <input type="text" id="S2" size="20">         
    103. 

  103. </p>
    104. 

  104. <p> 
    105. 

  105. <input type="button" value="可打印宽度(0.1mm):" onclick="javascript:getMyValue('PRINTSETUP_SIZE_WIDTH',document.getElementById('S3'))">     
    106. 

  106.   <input type="text" id="S3" size="20">         
    107. 

  107. </p>
    108. 

  108. <p> 
    109. 

  109. <input type="button" value="可打印高度(0.1mm):" onclick="javascript:getMyValue('PRINTSETUP_SIZE_HEIGHT',document.getElementById('S4'))">     
    110. 

  110.   <input type="text" id="S4" size="20">         
    111. 

  111. </p>
    112. 

  112. <p> 
    113. 

  113. <input type="button" value="不可打上边距(0.1mm):" onclick="javascript:getMyValue('PRINTSETUP_TOPMARGIN',document.getElementById('S5'))">     
    114. 

  114.   <input type="text" id="S5" size="20">         
    115. 

  115. </p>
    116. 

  116. <p> 
    117. 

  117. <input type="button" value="不可打左边距(0.1mm):" onclick="javascript:getMyValue('PRINTSETUP_LEFTMARGIN',document.getElementById('S6'))">     
    118. 

  118.   <input type="text" id="S6" size="20">         
    119. 

  119. </p>
    120. 

  120. <p> 
    121. 

  121. <input type="button" value="纸张(表单)名:" onclick="javascript:getMyValue('PRINTSETUP_PAGESIZE_NAME',document.getElementById('S7'))">     
    122. 

  122.   <input type="text" id="S7" size="20"></input>   
    123. 

  123. </p>
    124. 

  124. <p> 
    125. 

  125. <input type="button" value="所选打印机序号:" onclick="javascript:getMyValue('PRINTSETUP_PRINTER_INDEX',document.getElementById('U1'))">     
    126. 

  126.   <input type="text" id="U1" size="20"></input>
    127. 

  127. </p>
    128. 

  128. <p> 
    129. 

  129. <input type="button" value="所选打印机名:" onclick="javascript:getMyValue('PRINTSETUP_PRINTER_NAME',document.getElementById('S8'))">     
    130. 

  130.   <input type="text" id="S8" size="50"></input>
    131. 

  131. </p>
    132. 

  132. <p> 
    133. 

  133. <input type="button" value="打印方向:" onclick="javascript:getMyValue('PRINTSETUP_ORIENT',document.getElementById('S9'))">     
    134. 

  134.   <input type="text" id="S9" size="5"></input>0:纵向打印   1:横向打印
    135. 

  135. </p>
    136. 

  136. <p> 
    137. 

  137. <input type="button" value="已打印的次数:" onclick="javascript:getMyValue('PRINTED_TIMES',document.getElementById('T1'))">     
    138. 

  138.   <input type="text" id="T1" size="6"></input>      
    139. 

  139. </p>
    140. 

  140. <p> 
    141. 

  141. <input type="button" value="设置每次打印的份数:" onclick="javascript:getMyValue('PRINTSETUP_COPIES',document.getElementById('S10'))">     
    142. 

  142.   <input type="text" id="S10" size="5"></input>   
    143. 

  143. </p> 
    144. 

  144. <p>  
    145. 

  145. <input type="button" value="每份的总页数:" onclick="javascript:getMyValue('PRINTSETUP_PAGE_COUNT',document.getElementById('S11'))">     
    146. 

  146.   <input type="text" id="S11" size="20">（执行打印或预览指令后才正确）         
    147. 

  147. </p>
    148. 

  148. <p> 
    149. 

  149. <input type="button" value="起始页号:" onclick="javascript:getMyValue('PRINTSETUP_FIRST_PAGE',document.getElementById('S12'))">     
    150. 

  150.   <input type="text" id="S12" size="5"></input> （执行打印或预览指令后才正确）   
    151. 

  151. </p>
    152. 

  152. <p> 
    153. 

  153. <input type="button" value="结束页号:" onclick="javascript:getMyValue('PRINTSETUP_LAST_PAGE',document.getElementById('S13'))">     
    154. 

  154.   <input type="text" id="S13" size="5"></input> （执行打印或预览指令后才正确）   
    155. 

  155. </p>
    156. 

  156. <p> 
    157. 

  157. <input type="button" value="缩放打印的比例:" onclick="javascript:getMyValue('PRINTSETUP_PERCENT',document.getElementById('S14'))">     
    158. 

  158.   <input type="text" id="S14" size="5"></input><br>  
    159. 

  159. 0:30% 1:50% 2:60% 3:70% 4:80% 5:85% 6:90% 7:95% 8:100% 9:125% 10:150% 11:200% 12:按整宽 13:按整高 14:按整页 15:整宽不变形 16:整高不变形 17:自定比例        
    160. 

  160. </p>
    161. 

  161. <p> 
    162. 

  162. <input type="button" value="当前页号（预览时才能读）:" onclick="javascript:getMyValue('PREVIEW_PAGE_NUMBER',document.getElementById('Y1'))">     
    163. 

  163.   <input type="text" id="Y1" size="20">         
    164. 

  164. </p>
    165. 

  165. <p> 
    166. 

  166. <input type="button" value="缩放显示的比例（预览时才能读）:" onclick="javascript:getMyValue('PREVIEW_ZOOM_STATE',document.getElementById('Y2'))">     
    167. 

  167.   <input type="text" id="Y2" size="5"></input>
    168. 

  168. 0:适高  1:适宽  2:缩25%  3:缩50%  4:缩75%  5:正常  6:放150%  7:放200%  8:放300%  9:放500%     
    169. 

  169. </p>
    170. 

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

  171. </p>
    172. 

  172. <script language="javascript" type="text/javascript"> 
    173. 

  173. 	var LODOP; //声明为全局变量
    174. 

  174. 	var blPreviewOpen=false;
    175. 

  175. 	function myAction1(){	
    176. 

  176. 		if (!blPreviewOpen) OpenPreview();		
    177. 

  177. 		LODOP.DO_ACTION("PREVIEW_ZOOM_HIGHT",0);	
    178. 

  178. 	};
    179. 

  179. 	function myAction2(){	
    180. 

  180. 		if (!blPreviewOpen) OpenPreview();	
    181. 

  181. 		LODOP.DO_ACTION("PREVIEW_ZOOM_NORMAL",0);	
    182. 

  182. 	};
    183. 

  183. 	function myAction3(){	
    184. 

  184. 		if (!blPreviewOpen) OpenPreview();	
    185. 

  185. 		LODOP.DO_ACTION("PREVIEW_ZOOM_WIDTH",0);	
    186. 

  186. 	};
    187. 

  187. 	function myAction4(){	
    188. 

  188. 		if (!blPreviewOpen) OpenPreview();	
    189. 

  189. 		LODOP.DO_ACTION("PREVIEW_ZOOM_IN",0);	
    190. 

  190. 	};
    191. 

  191. 	function myAction5(){	
    192. 

  192. 		if (!blPreviewOpen) OpenPreview();	
    193. 

  193. 		LODOP.DO_ACTION("PREVIEW_ZOOM_OUT",0);	
    194. 

  194. 	};
    195. 

  195. 	function myAction6(){	
    196. 

  196. 		if (!blPreviewOpen) OpenPreview();	
    197. 

  197. 		LODOP.DO_ACTION("PREVIEW_PERCENT",document.getElementById('percent').value);	
    198. 

  198. 	};
    199. 

  199. 	function myAction7(){	
    200. 

  200. 		if (!blPreviewOpen) OpenPreview();	
    201. 

  201. 		LODOP.DO_ACTION("PREVIEW_GOFIRST",0);	
    202. 

  202. 	};
    203. 

  203. 	function myAction8(){	
    204. 

  204. 		if (!blPreviewOpen) OpenPreview();	
    205. 

  205. 		LODOP.DO_ACTION("PREVIEW_GOPRIOR",0);	
    206. 

  206. 	};
    207. 

  207. 	function myAction9(){	
    208. 

  208. 		if (!blPreviewOpen) OpenPreview();	
    209. 

  209. 		LODOP.DO_ACTION("PREVIEW_GONEXT",0);	
    210. 

  210. 	};
    211. 

  211. 	function myAction10(){	
    212. 

  212. 		if (!blPreviewOpen) OpenPreview();	
    213. 

  213. 		LODOP.DO_ACTION("PREVIEW_GOLAST",0);	
    214. 

  214. 	};
    215. 

  215. 	function myAction11(){	
    216. 

  216. 		if (!blPreviewOpen) OpenPreview();	
    217. 

  217. 		LODOP.DO_ACTION("PREVIEW_GOTO",document.getElementById('inputpage').value);//PREVIEW_GOSKIP	
    218. 

  218. 	};
    219. 

  219. 	function myAction12(){	
    220. 

  220. 		if (!blPreviewOpen) OpenPreview();	
    221. 

  221. 		LODOP.DO_ACTION("PREVIEW_SETUP",0);
    222. 

  222. 	};
    223. 

  223. 	function myAction13(){	
    224. 

  224. 		if (!blPreviewOpen) OpenPreview();
    225. 

  225. 		var iPageCount=LODOP.GET_VALUE("PREVIEW_PAGE_COUNT",0);//获得页数
    226. 

  226. 		LODOP.SET_PRINT_MODE("PRINT_START_PAGE",1);
    227. 

  227. 		LODOP.SET_PRINT_MODE("PRINT_END_PAGE",iPageCount);	
    228. 

  228. 		LODOP.DO_ACTION("PREVIEW_PRINT",0);	
    229. 

  229. 	};
    230. 

  230. 	function myAction14(){	
    231. 

  231. 		if (!blPreviewOpen) OpenPreview();
    232. 

  232. 		var iThisNumber=LODOP.GET_VALUE("PREVIEW_PAGE_NUMBER",0);//获得当前页号
    233. 

  233. 		LODOP.SET_PRINT_MODE("PRINT_START_PAGE",iThisNumber);
    234. 

  234. 		LODOP.SET_PRINT_MODE("PRINT_END_PAGE",iThisNumber);	
    235. 

  235. 		LODOP.DO_ACTION("PREVIEW_PRINT",0);	
    236. 

  236. 	};
    237. 

  237. 	function myAction15(){	
    238. 

  238. 		if (!blPreviewOpen) OpenPreview();	
    239. 

  239. 		LODOP.DO_ACTION("PREVIEW_ROTATE",0);	
    240. 

  240. 	};
    241. 

  241. 	function myAction16(){	
    242. 

  242. 		if (!blPreviewOpen) return;	
    243. 

  243. 		LODOP.DO_ACTION("PREVIEW_CLOSE",0);
    244. 

  244. 		blPreviewOpen=false;	
    245. 

  245. 	};
    246. 

  246. 	function OpenPreview() {
    247. 

  247. 	        LODOP=getLodop(document.getElementById('LODOP_X'),document.getElementById('LODOP_EM')); 
    248. 

  248. 		LODOP.PRINT_INIT("打印控件Lodop功能演示_自己设计预览界面");
    249. 

  249. 		LODOP.SET_PRINT_STYLE("FontSize",21);
    250. 

  250. 		for(i=1;i<4;i++){
    251. 

  251. 	        	var strBH=document.getElementById("BH"+i).value;
    252. 

  252. 		   	var strMC=document.getElementById("MC"+i).value;
    253. 

  253. 			var strSL=document.getElementById("SL"+i).value;
    254. 

  254. 			var strDJ=document.getElementById("DJ"+i).value;
    255. 

  255. 			LODOP.NEWPAGEA();
    256. 

  256. 			LODOP.ADD_PRINT_RECT(10,18,324,392,0,1);
    257. 

  257. 			LODOP.ADD_PRINT_TEXT(61,58,258,54,"商品编号："+strBH);
    258. 

  258. 			LODOP.ADD_PRINT_TEXT(145,58,258,54,"商品名称："+strMC);
    259. 

  259. 			LODOP.ADD_PRINT_TEXT(229,58,258,54,"商品数量："+strSL);
    260. 

  260. 			LODOP.ADD_PRINT_TEXT(312,58,258,54,"商品单价："+strDJ);
    261. 

  261. 		}	
    262. 

  262. 		//LODOP.SET_PRINT_PAGESIZE(0,1380,2450,"A4");
    263. 

  263. 		LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT","Full-Page");//按整页缩放
    264. 

  264. 		LODOP.SET_SHOW_MODE("HIDE_PAPER_BOARD",true);//隐藏走纸板
    265. 

  265. 		LODOP.SET_PREVIEW_WINDOW(0,3,0,0,0,""); //隐藏工具条，设置适高显示
    266. 

  266. 		LODOP.SET_SHOW_MODE("PREVIEW_IN_BROWSE",true); //预览界面内嵌到页面内
    267. 

  267. 		LODOP.PREVIEW();
    268. 

  268. 		blPreviewOpen=true;			
    269. 

  269. 	};
    270. 

  270. 	function getMyValue(strType,oResultOB){
    271. 

  271. 		var LODOP=getLodop(document.getElementById('LODOP_X'),document.getElementById('LODOP_EM')); 
    272. 

  272. 		if (LODOP.CVERSION) CLODOP.On_Return=function(TaskID,Value){if (oResultOB) oResultOB.value=Value;}; 
    273. 

  273. 		var stResult=LODOP.GET_VALUE(strType,"0");
    274. 

  274. 		if (!LODOP.CVERSION) oResultOB.value=stResult; 
    275. 

  275. 	};
    276. 

  276. 

  277. 	if (needCLodop()) {
    278. 

  278. 		window.On_CLodop_Opened=function(){
    279. 

  279. 			OpenPreview();							
    280. 

  280. 			window.On_CLodop_Opened=null;
    281. 

  281. 		};					
    282. 

  282. 	} else 
    283. 

  283. 	window.onload = function(){OpenPreview();};
    284. 

  284. 	
    285. 

  285. </script>
    286. 

  286. 

  287. </body>
    288. 

  288. </html>
    289.