PrintSample3.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>WEB打印控件LODOP的样例三:用程序代码生成打印页</title>
  6. <script language="javascript" src="LodopFuncs.js"></script>
  7. </head>
  8. <body style="zoom:1;font-family:'adobe-clean',sans-serif">
  9. <h2><font color="#009999">演示用程序代码生成打印页:</font></h2>
  10. <table cellpadding="0" cellspacing="0" border="0" class="numberedList" width="572">
  11. <tr id="eCE2" vAlignment="top" class>
  12. <td Alignment="right" class="dropCapQ" nowrap width="6"></td>
  13. <td width="812">
  14. <table name="tiba" class="tiba" width="769" height="1007">
  15. <tr>
  16. <td height="18">一般B/S系统总是“页面看到什么才能打印什么”,这种局面即便是采用</td>
  17. </tr>
  18. <tr>
  19. <td height="18">一些传统打印控件也没有改观。现在利用Lodop简单强大的几个函数,配合</td>
  20. </tr>
  21. <tr>
  22. <td height="18">JavaScript完全进入了“只看想看的、打印想打的”理想时代!</td>
  23. </tr>
  24. <tr>
  25. <td height="18">
  26. </td>
  27. </tr>
  28. <tr style="padding:0px 0px 7px 0px;border:inset 1px #f00;">
  29. <td style="vertical-Alignment: top" width="739" height="18">
  30. <h4><font color="#009999">下面模拟打印一张名片,了解这几个函数</font></h4>
  31. </td>
  32. </tr>
  33. <tr style="padding:0px 0px 7px 0px;border:inset 1px #f00;">
  34. <td style="vertical-Alignment: top" width="739" height="18"><b>1、画一个名片大小的矩形边框:</b></td>
  35. </tr>
  36. <tr style="padding:0px 0px 7px 0px;border:inset 1px #f00;">
  37. <td style="vertical-Alignment: top" width="739" height="15">
  38. <font color="#0000FF" size="2">LODOP.ADD_PRINT_RECT(10,55,360,220,0,1);</font></td>
  39. </tr>
  40. <tr style="padding:0px 0px 7px 0px;border:inset 1px #f00;">
  41. <td style="vertical-Alignment: top" width="739" height="15">
  42. <font size="2">边框离纸张顶端10px(px是绝对值长度,等于1/96英寸,下同)距左边55px、宽360px、高220px、</font></td>
  43. </tr>
  44. <tr style="padding:0px 0px 7px 0px;border:inset 1px #f00;">
  45. <td style="vertical-Alignment: top" width="739" height="15">
  46. <font size="2">框为实线(0-实线
  47. 1-破折线 2-点线 3-点划线 4-双点划线)、线宽为1px</font></td>
  48. </tr>
  49. <tr>
  50. <td style="vertical-Alignment: top" width="739" height="18"></td>
  51. </tr>
  52. <tr>
  53. <td style="vertical-Alignment: top" width="739" height="18"><b>2、设置基本打印风格:</b></td>
  54. </tr>
  55. <tr>
  56. <td style="vertical-Alignment: top" width="739" height="15">
  57. <font color="#0000FF" size="2">LODOP.SET_PRINT_STYLE(&quot;FontSize&quot;,11);</font></td>
  58. </tr>
  59. <tr>
  60. <td style="vertical-Alignment: top" width="739" height="15">
  61. <font size="2">&quot;FontSize&quot;</font><font size="2">是系统关键字,表示设置字体大小,11是字体大小值,单位是pt。</font></td>
  62. </tr>
  63. <tr>
  64. <td style="vertical-Alignment: top" width="739" height="21">&nbsp;&nbsp;</td>
  65. </tr>
  66. <tr>
  67. <td style="vertical-Alignment: top" width="739" height="18"><b>3、在矩形框内打印姓名栏:</b></td>
  68. </tr>
  69. <tr>
  70. <td style="vertical-Alignment: top" width="739" height="15">
  71. <font color="#0000FF" size="2">LODOP.ADD_PRINT_TEXT(20,180,100,25,&quot;郭德强&quot;);</font></td>
  72. </tr>
  73. <tr>
  74. <td style="vertical-Alignment: top" width="739" height="15">
  75. <font size="2">姓名栏离纸张顶端20px、距左边180px、宽100px、高25px、内容为“郭德强”</font></td>
  76. </tr>
  77. <tr>
  78. <td style="vertical-Alignment: top" width="739" height="21">&nbsp;&nbsp;</td>
  79. </tr>
  80. <tr>
  81. <td style="vertical-Alignment: top" width="739" height="18"><b>4、设置姓名栏的打印风格:</b></td>
  82. </tr>
  83. <tr>
  84. <td style="vertical-Alignment: top" width="739" height="15">
  85. <font color="#0000FF" size="2">LODOP.SET_PRINT_STYLEA(2,&quot;FontName&quot;,&quot;隶书&quot;);</font></td>
  86. </tr>
  87. <tr>
  88. <td style="vertical-Alignment: top" width="739" height="15">
  89. <font color="#0000FF" size="2">LODOP.SET_PRINT_STYLEA(2,&quot;FontSize&quot;,15);</font></td>
  90. </tr>
  91. <tr>
  92. <td style="vertical-Alignment: top" width="739" height="15">
  93. <font size="2">2是姓名栏的增加顺序号,</font><font color="#0000FF" size="2">&quot;FontName&quot;</font><font size="2">和</font><font color="#0000FF" size="2">&quot;FontSize&quot;</font><font size="2">是</font><font size="2">系统关键字</font><font size="2">,表示设置字体名和字体大小。</font></td>
  94. </tr>
  95. <tr>
  96. <td style="vertical-Alignment: top" width="739" height="15">
  97. <font size="2">&quot;隶书&quot;是字体名值,同操作系统的字体名,15是字体大小值,单位是pt。</font></td>
  98. </tr>
  99. <tr>
  100. <td style="vertical-Alignment: top" width="739" height="13"><font size="2">序号设0表示最新对象,注意</font><font color="#0000FF" size="2">SET_PRINT_STYLEA</font><font size="2">与</font><font color="#0000FF" size="2">SET_PRINT_STYLE</font><font size="2">的区别。</font></td>
  101. </tr>
  102. <tr>
  103. <td style="vertical-Alignment: top" width="739" height="21"></td>
  104. </tr>
  105. <tr>
  106. <td style="vertical-Alignment: top" width="739" height="18">
  107. <b>5、下面打印其职务、地址、电话等</b>(用基本风格):</td>
  108. </tr>
  109. <tr>
  110. <td style="vertical-Alignment: top" width="739" height="41">
  111. <font color="#0000FF" size="2">LODOP.ADD_PRINT_TEXT(53,187,75,20,&quot;科学家&quot;);<br>
  112. LODOP.ADD_PRINT_TEXT(100,131,272,20,&quot;地址:中国北京社会科学院附近东大街西胡同&quot;);<br>
  113. LODOP.ADD_PRINT_TEXT(138,132,166,20,&quot;电话:010-88811888&quot;);</font></td>
  114. </tr>
  115. <tr>
  116. <td style="vertical-Alignment: top" width="739" height="21">&nbsp;</td>
  117. </tr>
  118. <tr>
  119. <td style="vertical-Alignment: top" width="739" height="18">
  120. <b>6、在发送以上指令前,一般要初始化并设置打印任务名:</b></td>
  121. </tr>
  122. <tr>
  123. <td style="vertical-Alignment: top" width="739" height="15">
  124. <font color="#0000FF" size="2">LODOP.PRINT_INIT(&quot;打印插件功能演示_代码功能_名片&quot;);</font></td>
  125. </tr>
  126. <tr>
  127. <td style="vertical-Alignment: top" width="739" height="15">
  128. <font size="2">初始化并指定打印任务名是&quot;打印插件功能演示_代码功能_名片&quot;</font></td>
  129. </tr>
  130. <tr>
  131. <td style="vertical-Alignment: top" width="739" height="21">&nbsp;</td>
  132. </tr>
  133. <tr>
  134. <td style="vertical-Alignment: top" width="739" height="18">
  135. 现在用以上代码打印,先看看<a href="javascript:myPreview()"><b>打印预览</b></a>效果!</td>
  136. </tr>
  137. <tr>
  138. <td style="vertical-Alignment: top" width="739" height="18">
  139. 如果效果好可以<a href="javascript:myPrint()"><b>直接打印</b></a>
  140. ,打印机多就<a href="javascript:myPrintA()"><b>选择打印机</b></a>打印!</td>
  141. </tr>
  142. <tr>
  143. <td style="vertical-Alignment: top" width="739" height="18">
  144. 效果不好又懒地改,干脆让操作者自己<a href="javascript:mySetup()"><b>打印维护</b></a>吧!</td>
  145. </tr>
  146. <tr>
  147. <td style="vertical-Alignment: top" width="739" height="21">&nbsp;</td>
  148. </tr>
  149. <tr>
  150. <td style="vertical-Alignment: top" width="739" height="18">尽管这些函数足够简单,可理解其参数也是不胜其烦,</td>
  151. </tr>
  152. <tr>
  153. <td style="vertical-Alignment: top" width="739" height="18">但事实上包括我写这些样例也不是人工计算其参数的,</td>
  154. </tr>
  155. <tr>
  156. <td style="vertical-Alignment: top" width="739" height="18">
  157. 全得益于打印控件提供的强大<a href="javascript:myDesign()"><b>打印设计</b></a>功能!</td>
  158. </tr>
  159. <tr>
  160. <td style="vertical-Alignment: top" width="739" height="21">
  161. &nbsp;</td>
  162. </tr>
  163. <tr>
  164. <td style="vertical-Alignment: top" width="739" height="18">进入<a href="javascript:myBlankDesign()"><b>空白设计</b></a>自己涂鸦一番,多用用其中“生成程序代码”菜单哟!</td>
  165. </tr>
  166. <tr>
  167. <td style="vertical-Alignment: top" width="739" height="18">“打印维护”和“打印设计”有点类似,二者的区别是功能权限不同,</td>
  168. </tr>
  169. <tr>
  170. <td style="vertical-Alignment: top" width="739" height="18">后者是开发人员用的,前者可根据实际情况提供给最终用户。</td>
  171. </tr>
  172. <tr>
  173. <td style="vertical-Alignment: top" width="739" height="18"></td>
  174. </tr>
  175. <tr>
  176. <td style="vertical-Alignment: top" width="739" height="18"><b>7、用超文本实现该名片打印:</b></td>
  177. </tr>
  178. <tr>
  179. <td style="vertical-Alignment: top" width="739" height="22"><font color="#0000FF" size="2">LODOP.ADD_PRINT_HTM(10,55,&quot;100%&quot;,&quot;100%&quot;,strHtml);</font></td>
  180. </tr>
  181. <tr>
  182. <td style="vertical-Alignment: top" width="739" height="22"><font size="2">前俩参数设置超文本对象位置,两个100%设置对象区域可达纸张边,最后参数是超文本代码</font></td>
  183. </tr>
  184. <tr>
  185. <td style="vertical-Alignment: top" width="739" height="17"></td>
  186. </tr>
  187. <tr>
  188. <td style="vertical-Alignment: top" width="739" height="22">用超文本实现如上效果更好理解,只需一条<font color="#0000FF">ADD_PRINT_HTM</font>指令把如下文本框里的</td>
  189. </tr>
  190. <tr>
  191. <td style="vertical-Alignment: top" width="739" height="17">超文本内容传给控件就行,样式全依赖HTML展现,
  192. 点<a href="javascript:;" onclick="javascript:myAddHtml();LODOP.PREVIEW();">打印预览</a>
  193. 或<a href="javascript:;" onclick="javascript:myAddHtml();LODOP.PRINT_DESIGN();">打印设计</a>看看。</td>
  194. </tr>
  195. <tr>
  196. <td style="vertical-Alignment: top" width="739" height="18">
  197. <textarea rows="15" id="textarea01" cols="80">
  198. <table border="1" width="360" height="220" style="border-collapse:collapse;border:solid 1px" bordercolor="#000000">
  199. <tr>
  200. <td width="100%" height="240">
  201. <p align="center">
  202. <font face="隶书" size="5" style="letter-spacing: 10px">郭德强</font>
  203. <p align="center"><font face="宋体" size="3">科学家</font></p>
  204. <p align="left"><font face="宋体" size="3"> 地址:中国北京社会科学院附近东大街西胡同</font></p>
  205. <p align="left"><font face="宋体" size="3"> 电话:010-88811888</font></p>
  206. <p><br>  
  207. </p>
  208. </td>
  209. </tr>
  210. </table>
  211. </textarea>
  212. </td>
  213. </tr>
  214. </table>
  215. </td>
  216. </tr>
  217. </table>
  218. <p Alignment="left"><a href="PrintSampIndex.html">&lt;&lt;回样例目录</a>
  219. </p>
  220. <script language="javascript" type="text/javascript">
  221. var LODOP; //声明为全局变量
  222. function myPrint() {
  223. CreatePrintPage();
  224. LODOP.PRINT();
  225. };
  226. function myPrintA() {
  227. CreatePrintPage();
  228. LODOP.PRINTA();
  229. };
  230. function myPreview() {
  231. CreatePrintPage();
  232. LODOP.PREVIEW();
  233. };
  234. function mySetup() {
  235. CreatePrintPage();
  236. LODOP.PRINT_SETUP();
  237. };
  238. function myDesign() {
  239. CreatePrintPage();
  240. LODOP.PRINT_DESIGN();
  241. };
  242. function myBlankDesign() {
  243. LODOP=getLodop();
  244. LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_空白练习");
  245. LODOP.PRINT_DESIGN();
  246. };
  247. function CreatePrintPage() {
  248. LODOP=getLodop();
  249. LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_名片");
  250. LODOP.ADD_PRINT_RECT(10,55,360,220,0,1);
  251. LODOP.SET_PRINT_STYLE("FontSize",11);
  252. LODOP.ADD_PRINT_TEXT(20,180,100,25,"郭德强");
  253. LODOP.SET_PRINT_STYLEA(2,"FontName","隶书");
  254. LODOP.SET_PRINT_STYLEA(2,"FontSize",15);
  255. LODOP.ADD_PRINT_TEXT(53,187,75,20,"科学家");
  256. LODOP.ADD_PRINT_TEXT(100,131,272,20,"地址:中国北京社会科学院附近东大街西胡同");
  257. LODOP.ADD_PRINT_TEXT(138,132,166,20,"电话:010-88811888");
  258. };
  259. function myAddHtml() {
  260. LODOP=getLodop();
  261. LODOP.PRINT_INIT("");
  262. LODOP.ADD_PRINT_HTM(10,55,"100%","100%",document.getElementById("textarea01").value);
  263. };
  264. </script>
  265. </body>
  266. </html>