PrintSample41.html 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  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>
  9. <h2><font color="#009999">演示内容关联后按顺序打印:</font></h2>
  10. <p>&nbsp;&nbsp;&nbsp; 利用<font color="#0000FF">SET_PRINT_STYLEA</font>的类型<font color="#0000FF">“LinkedItem”</font>可以把多个独立的内容关联起来,让它们顺序打印,</p>
  11. <p>一个内容关联别人后,其Top值不再是上边距,而是与被关联者的间隙距离,Left值也变为左边距相对偏离量。</p>
  12. <p>多个对象顺序关联后形成“关联串”,这个“串”分页时在每页高度以第一个对象为准,整个过程可有多个串。</p>
  13. <h2><font color="#009999">演示:</font></h2>
  14. <p>1:打印完下面的表格后,紧跟表格末尾加上“制表日期”和“制表人”,其程序代码如下:</p>
  15. <p>注意LinkedItem后面的1是“被关联对象”的序号。</p>
  16. <textarea rows="8" id="code1" cols="94">
  17. LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_打印关联内容一");
  18. LODOP.ADD_PRINT_TABLE(10,5,500,"90%",document.getElementById("tablediv").innerHTML);
  19. LODOP.ADD_PRINT_TEXT(15,50,200,25,"制表日期:"+LODOP.FORMAT("TIME:YYYY年MM月DD日","DATE"));
  20. LODOP.SET_PRINT_STYLEA(0,"LinkedItem",1);
  21. LODOP.ADD_PRINT_TEXT(15,300,200,25,"制表人:guest");
  22. LODOP.SET_PRINT_STYLEA(0,"LinkedItem",1);
  23. </textarea>
  24. <br>
  25. 用以上代码执行<a href="javascript:myPeview01();">预览打印1</a>或<a href="javascript:myDesign01();">打印设计1</a>
  26.  <p>2:如下程序代码把该表格连续打印三遍后,再紧接打印“制表日期”和“制表人”。</p>
  27. <p>注意LinkedItem值为负数代表“前移几位”的对象,所以-1就是上一个。这个语句可以实现连续关联。</p>
  28. <p>LinkNewPage设置第三个表格输出时“从新页开始”,当然如果空间足够,也会与前面的同页完成。</p>
  29. <textarea rows="12" id="code2" cols="94">
  30. LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_打印关联内容二");
  31. LODOP.ADD_PRINT_TEXT(10,60,500,40,"第一页有标题,后页没标题但位置提上来");
  32. LODOP.ADD_PRINT_TABLE(50,5,500,480,document.getElementById("tablediv").innerHTML);
  33. LODOP.SET_PRINT_STYLEA(0,"Offset2Top",-40); //设置次页偏移把区域向上扩
  34. LODOP.ADD_PRINT_TABLE(10,0,500,280,document.getElementById("tablediv").innerHTML);
  35. LODOP.SET_PRINT_STYLEA(0,"LinkedItem",-1);
  36. LODOP.ADD_PRINT_TABLE(10,0,500,280,document.getElementById("tablediv").innerHTML);
  37. LODOP.SET_PRINT_STYLEA(0,"LinkedItem",-1);
  38. LODOP.SET_PRINT_STYLEA(0,"LinkNewPage",true);
  39. LODOP.ADD_PRINT_TEXT(15,50,200,25,"制表日期:"+LODOP.FORMAT("TIME:YYYY年MM月DD日","DATE"));
  40. LODOP.SET_PRINT_STYLEA(0,"LinkedItem",-1);
  41. LODOP.ADD_PRINT_TEXT(15,300,200,25,"制表人:guest");
  42. LODOP.SET_PRINT_STYLEA(0,"LinkedItem",-2);
  43. </textarea>
  44. <p>
  45. 用以上代码执行<a href="javascript:myPeview02();">预览打印2</a>或<a href="javascript:myDesign02();">打印设计2</a>。</p>
  46. <div id="tablediv">
  47. <style> table,td,th {border:1px solid black;border-collapse: collapse}</style>
  48. <table border=1 width="452" height="579">
  49. <thead>
  50. <tr><th width="218" height="16">设备编号(表头)</th>
  51. <th width="218" height="16">设备名称(表头)</th>
  52. </tr>
  53. </thead>
  54. <tbody>
  55. <tr>
  56. <td width="218" height="8">001</td>
  57. <td width="218" height="8">电脑</td>
  58. </tr></tbody>
  59. <tbody>
  60. <tr>
  61. <td width="218" height="16">002</td>
  62. <td width="218" height="16"><span dataFld=TITLE>腹腔镜器械</span></td>
  63. </tr></tbody>
  64. <tbody>
  65. <tr>
  66. <td width="218" height="16">003</td>
  67. <td width="218" height="16">工作手件</td>
  68. </tr></tbody>
  69. <tbody>
  70. <tr>
  71. <td width="218" height="16">004</td>
  72. <td width="218" height="16"><span dataFld=TITLE>陈列柜</span></td>
  73. </tr></tbody>
  74. <tbody>
  75. <tr>
  76. <td width="218" height="16">005</td>
  77. <td width="218" height="16"><span dataFld=TITLE>不锈钢紫外线消毒车</span></td>
  78. </tr></tbody>
  79. <tbody>
  80. <tr>
  81. <td width="218" height="16">006</td>
  82. <td width="218" height="16"><span dataFld=TITLE>刻录机</span></td>
  83. </tr></tbody>
  84. <tbody>
  85. <tr>
  86. <td width="218" height="16">007</td>
  87. <td width="218" height="16">抓钳</td>
  88. </tr></tbody>
  89. <tbody>
  90. <tr>
  91. <td width="218" height="12">008</td>
  92. <td width="218" height="12">冷光源灯</td>
  93. </tr></tbody>
  94. <tbody>
  95. <tr>
  96. <td width="218" height="16">009</td>
  97. <td width="218" height="16"><span dataFld=TITLE>手术床</span></td>
  98. </tr></tbody>
  99. <tbody>
  100. <tr>
  101. <td width="218" height="16">010</td>
  102. <td width="218" height="16"><span dataFld=TITLE>手术无影灯</span></td>
  103. </tr></tbody>
  104. <tbody>
  105. <tr>
  106. <td width="218" height="16">011</td>
  107. <td width="218" height="16"><span dataFld=TITLE>手术无影灯</span></td>
  108. </tr></tbody>
  109. <tbody>
  110. <tr>
  111. <td width="218" height="16">012</td>
  112. <td width="218" height="16">纤维导光头灯</td>
  113. </tr></tbody>
  114. <tbody>
  115. <tr>
  116. <td width="218" height="16">013</td>
  117. <td width="218" height="16"><span dataFld=TITLE>电切镜</span></td>
  118. </tr></tbody>
  119. <tbody>
  120. <tr>
  121. <td width="218" height="16">014</td>
  122. <td width="218" height="16"><span dataFld=TITLE>电切镜</span></td>
  123. </tr></tbody>
  124. <tbody>
  125. <tr>
  126. <td width="218" height="16">015</td>
  127. <td width="218" height="16"><span dataFld=TITLE>鼻窦镜</span></td>
  128. </tr></tbody>
  129. <tbody>
  130. <tr>
  131. <td width="218" height="16">016</td>
  132. <td width="218" height="16"><span dataFld=TITLE>腹腔镜</span></td>
  133. </tr></tbody>
  134. <tbody>
  135. <tr>
  136. <td width="218" height="16">017</td>
  137. <td width="218" height="16"><span dataFld=TITLE>关节镜光学视管</span></td>
  138. </tr></tbody>
  139. <tbody>
  140. <tr>
  141. <td width="218" height="16">018</td>
  142. <td width="218" height="16">经皮肾镜</td>
  143. </tr></tbody>
  144. <tbody>
  145. <tr>
  146. <td width="218" height="16">019</td>
  147. <td width="218" height="16">输尿管镜</td>
  148. </tr></tbody>
  149. <tbody>
  150. <tr>
  151. <td width="218" height="16">020</td>
  152. <td width="218" height="16"><span dataFld=TITLE>纤维导光关节镜</span></td>
  153. </tr></tbody>
  154. <tbody>
  155. <tr>
  156. <td width="218" height="16">021</td>
  157. <td width="218" height="16"><span dataFld=TITLE>纤维导光关节镜</span></td>
  158. </tr></tbody>
  159. <tbody>
  160. <tr>
  161. <td width="218" height="16">022</td>
  162. <td width="218" height="16"><span dataFld=TITLE>可见分光光度计</span></td>
  163. </tr></tbody>
  164. <tbody>
  165. <tr>
  166. <td width="218" height="16">023</td>
  167. <td width="218" height="16"><span dataFld=TITLE>酸度计</span></td>
  168. </tr></tbody>
  169. <tbody>
  170. <tr>
  171. <td width="218" height="16">024</td>
  172. <td width="218" height="16">电热三用水箱</td>
  173. </tr></tbody>
  174. <tbody>
  175. <tr>
  176. <td width="218" height="16">025</td>
  177. <td width="218" height="16"><span dataFld=TITLE>TDP治疗机</span></td>
  178. </tr></tbody>
  179. <tfoot>
  180. <tr><th width="218" height="13">设备号(表尾)</th><th width="218" height="13">设备名(表尾)</th></tr>
  181. </tfoot>
  182. </table>
  183. </div>
  184. <p><a href="PrintSampIndex.html">&lt;&lt;回样例目录</a>
  185. </p>
  186. <script language="javascript" type="text/javascript">
  187. var LODOP; //声明为全局变量
  188. function myDesign01() {
  189. LODOP=getLodop();
  190. eval(document.getElementById('code1').value);
  191. if (LODOP.CVERSION) CLODOP.On_Return=function(TaskID,Value){document.getElementById('code1').value=Value;};
  192. document.getElementById('code1').value=LODOP.PRINT_DESIGN();
  193. };
  194. function myPeview01() {
  195. LODOP=getLodop();
  196. eval(document.getElementById('code1').value);
  197. LODOP.PREVIEW();
  198. };
  199. function myDesign02() {
  200. LODOP=getLodop();
  201. eval(document.getElementById('code2').value);
  202. if (LODOP.CVERSION) CLODOP.On_Return=function(TaskID,Value){document.getElementById('code2').value=Value;};
  203. document.getElementById('code2').value=LODOP.PRINT_DESIGN();
  204. };
  205. function myPeview02() {
  206. LODOP=getLodop();
  207. eval(document.getElementById('code2').value);
  208. LODOP.PREVIEW();
  209. };
  210. </script>
  211. </body>
  212. </html>