PrintSample34.html 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  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. <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">
  15. <tr>
  16. <td>Lodop函数的许多参数可声明使用<font color="#0000FF">in(英寸)、cm(厘米)、mm(毫米)、pt(磅)</font><font color="#0000FF">、px(1/96英寸)</font>等绝对长度单位,</td>
  17. </tr>
  18. <tr>
  19. <td>
  20. 其中部分函数(数据区域)的计量单位还可以使用<font color="#0000FF">百分比%</font>,这类值是相对于纸张宽或高的比率。例如:
  21. </td>
  22. </tr>
  23. <tr>
  24. <td>
  25. <font color="#0000FF" size="2">ADD_PRINT_RECT(</font><font color="#FF0000" size="2">&quot;0%&quot;,&quot;0%&quot;,&quot;100%&quot;,&quot;100%&quot;,</font><font color="#0000FF" size="2">0,1);</font>
  26. </td>
  27. </tr>
  28. <tr style="padding:0px 0px 7px 0px;border:inset 1px #f00;">
  29. <td style="vertical-Alignment: top" width="739">
  30. 这行语句的参数含义是:矩形的上边距和左边距是0,其宽高与纸张的宽高100%一致。
  31. </td>
  32. </tr>
  33. <tr style="padding:0px 0px 7px 0px;border:inset 1px #f00;">
  34. <td style="vertical-Alignment: top" width="739">
  35. </td>
  36. </tr>
  37. <tr style="padding:0px 0px 7px 0px;border:inset 1px #f00;">
  38. <td style="vertical-Alignment: top" width="739">
  39. 如下是相关函数清单(红色参数部分):
  40. </td>
  41. </tr>
  42. <tr style="padding:0px 0px 7px 0px;border:inset 1px #f00;">
  43. <td style="vertical-Alignment: top" width="739">
  44. <font color="#0000FF" size="2">ADD_PRINT_TEXT(</font><font color="#FF0000" size="2">Top,Left,Width,Height,</font><font color="#0000FF" size="2">strContent:);</font></td>
  45. </tr>
  46. <tr>
  47. <td style="vertical-Alignment: top" width="739"><font color="#0000FF" size="2">ADD_PRINT_HTM(</font><font color="#FF0000" size="2">Top,Left,Width,Height,</font><font color="#0000FF" size="2">strHtml);</font></td>
  48. </tr>
  49. <tr>
  50. <td style="vertical-Alignment: top" width="739"><font color="#0000FF" size="2">ADD_PRINT_TABLE(</font><font color="#FF0000" size="2">Top,Left,Width,Height,</font><font color="#0000FF" size="2">strHtml);</font></td>
  51. </tr>
  52. <tr>
  53. <td style="vertical-Alignment: top" width="739">
  54. <font color="#0000FF" size="2">ADD_PRINT_URL(</font><font color="#FF0000" size="2">Top,Left,Width,Height,</font><font color="#0000FF" size="2">strURL);</font></td>
  55. </tr>
  56. <tr>
  57. <td style="vertical-Alignment: top" width="739">
  58. <font color="#0000FF" size="2">ADD_PRINT_IMAGE(</font><font color="#FF0000" size="2">Top,Left,Width,Height,</font><font color="#0000FF" size="2">strHtml);</font></td>
  59. </tr>
  60. <tr>
  61. <td style="vertical-Alignment: top" width="739"><font color="#0000FF" size="2">ADD_PRINT_TBURL(</font><font color="#FF0000" size="2">Top,Left,Width,Height,</font><font color="#0000FF" size="2">strURL);</font></td>
  62. </tr>
  63. <tr>
  64. <td style="vertical-Alignment: top" width="739"><font color="#0000FF" size="2">ADD_PRINT_HTML(</font><font color="#FF0000" size="2">Top,Left,Width,Height,</font><font color="#0000FF" size="2">strHtml);</font></td>
  65. </tr>
  66. <tr>
  67. <td style="vertical-Alignment: top" width="739"><font color="#0000FF" size="2">ADD_PRINT_LINE(</font><font color="#FF0000" size="2">Top1,Left1,Top2,Left2,</font><font color="#0000FF" size="2">intLineStyle,intLineWidth);</font></td>
  68. </tr>
  69. <tr>
  70. <td style="vertical-Alignment: top" width="739">
  71. <font color="#0000FF" size="2">ADD_PRINT_RECT(</font><font color="#FF0000" size="2">Top,Left,Width,Height,</font><font color="#0000FF" size="2">intLineStyle,intLineWidth);</font></td>
  72. </tr>
  73. <tr>
  74. <td style="vertical-Alignment: top" width="739">
  75. <font color="#0000FF" size="2">ADD_PRINT_ELLIPSE(</font><font color="#FF0000" size="2">Top,Left,Width,Height,</font><font color="#0000FF" size="2">intLineStyle,intLineWidth);</font></td>
  76. </tr>
  77. <tr>
  78. <td style="vertical-Alignment: top" width="739">
  79. <font color="#0000FF" size="2">ADD_PRINT_SHAPE(intShapeType,</font><font color="#FF0000" size="2">Top,Left,Width,Height,</font><font color="#0000FF" size="2">intLineStyle,intLineWidth);</font></td>
  80. </tr>
  81. <tr>
  82. <td style="vertical-Alignment: top" width="739">
  83. <font color="#0000FF" size="2">ADD_PRINT_TEXTA(strItemName,</font><font color="#FF0000" size="2">Top,Left,Width,Height,</font><font color="#0000FF" size="2">strContent);</font></td>
  84. </tr>
  85. <tr>
  86. <td style="vertical-Alignment: top" width="739">
  87. &nbsp;
  88. </td>
  89. </tr>
  90. <tr>
  91. <td style="vertical-Alignment: top" width="739">现在演示在纸张的上半部画一个<b>贴边</b>椭圆,在下半部<b>贴边</b>打印如下表格,注意table的width和height也是百分比(100%),先进入<a href="javascript:myDesign()"><b>打印设计</b></a>看看,<a href="javascript:myPreview()">打印预览</a>时选一下其它纸张观察一下变化。</td>
  92. </tr>
  93. <tr>
  94. <td style="vertical-Alignment: top" width="739"></td>
  95. </tr>
  96. </table>
  97. </td>
  98. </tr>
  99. </table>
  100. <div id="table02">
  101. <table border="1" width="100%" height="100%" style="border-collapse:collapse;border:1px solid black;"border-collapse:collapse>
  102. <tr>
  103. <td width="11%" align="center" style="border:1px solid">A1</td>
  104. <td width="9%" align="center" style="border:1px solid">B1</td>
  105. <td width="11%" align="center" style="border:1px solid">C1</td>
  106. <td width="9%" align="center" style="border:1px solid">D1</td>
  107. <td width="10%" align="center" style="border:1px solid">E1</td>
  108. </tr>
  109. <tr>
  110. <td width="11%" align="center" style="border:1px solid">A2</td>
  111. <td width="9%" align="center" style="border:1px solid">B2</td>
  112. <td width="11%" align="center" style="border:1px solid">C2</td>
  113. <td width="9%" align="center" style="border:1px solid">D2</td>
  114. <td width="10%" align="center" style="border:1px solid">E2</td>
  115. </tr>
  116. <tr>
  117. <td width="11%" align="center" style="border:1px solid">A3</td>
  118. <td width="9%" align="center" style="border:1px solid">B3</td>
  119. <td width="11%" align="center" style="border:1px solid">C3</td>
  120. <td width="9%" align="center" style="border:1px solid">D3</td>
  121. <td width="10%" align="center" style="border:1px solid">E3</td>
  122. </tr>
  123. </table>
  124. </div>
  125. <p><a href="PrintSampIndex.html">&lt;&lt;回样例目录</a></p>
  126. <script language="javascript" type="text/javascript">
  127. var LODOP; //声明为全局变量
  128. function myCreatePage() {
  129. LODOP=getLodop();
  130. LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_百分比单位演示");
  131. LODOP.ADD_PRINT_ELLIPSE("0%","0%","100%","50%",0,1);
  132. LODOP.ADD_PRINT_TABLE("50%",1,"100%","49%","<body style='margin:0'>"+document.getElementById("table02").innerHTML+"</body>");
  133. };
  134. function myDesign() {
  135. myCreatePage();
  136. LODOP.PRINT_DESIGN();
  137. };
  138. function myPreview() {
  139. myCreatePage();
  140. LODOP.PREVIEW();
  141. };
  142. </script>
  143. </body>
  144. </html>