PrintSample2.html 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  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>
  10. </h2>
  11. <form id="form1">
  12. <table border="1" width="300" id="tb01" bgcolor="#CCFFCC" style="border:solid 1px black;border-collapse:collapse"><tr><td width="133" id="mtb001">
  13. <font face="黑体" color="#FF0000" size="3"><u>&nbsp;《表单一》&nbsp;</u></font></td></tr></table>
  14. <table border="1" width="300" height="106" cellspacing="0" bgcolor="#CCFFFF"style="border-collapse:collapse;table-layout:fixed;border:solid 1px black;"><tr>
  15. <td width="66" height="16" style="border:solid 1px black"><font color="#0000FF">A</font><font color="#0000FF">等</font></td>
  16. <td width="51" height="16" style="border:solid 1px black"><font color="#0000FF">B</font><font color="#0000FF">等</font></td>
  17. <td width="51" height="16" style="border:solid 1px black"><font color="#0000FF">C</font><font color="#0000FF">等</font></td></tr>
  18. <tr>
  19. <td width="66" height="16" style="border:solid 1px black">A<sub>01</sub></td>
  20. <td width="80" height="12" style="border:solid 1px black">中-001</td>
  21. <td width="51" height="12" style="border:solid 1px black">C1<sup>x</sup></td>
  22. </tr>
  23. <tr>
  24. <td width="66" height="16" style="border:solid 1px black">A<sub>02</sub>Φ</td>
  25. <td width="80" height="16" style="border:solid 1px black">日-スの</td>
  26. <td width="51" height="16" style="border:solid 1px black"><font face='Vernada'>7&#13221</font></td>
  27. </tr>
  28. <tr><td width="66" height="16" style="border:solid 1px black;overflow:hidden">A<sub>03</sub><nobr>over隐藏后面的:1234567890</nobr>
  29. </td><td width="80" height="16" style="border:solid 1px black;overflow:hidden">韩-안녕</td><td width="51" height="16">C3<sup>x</sup>
  30. </td></tr> </table>
  31. </form>
  32. <br>
  33. <div id="form2">
  34. <table border="1" width="100%" id="tb01" bgcolor="#CCFFCC" style="border:solid 1px black;border-collapse:collapse"><tr><td width="133" id="mtb001">
  35. <font face="黑体" color="#FF0000" size="3">《表单二》&copy;</font></td></tr></table>
  36. <table border="1" width="100%" height="106" cellspacing="0" bgcolor="#CCFFFF" style="border:solid 1px black;border-collapse:collapse"><tr>
  37. <td width="66" height="16" style="border:solid 1px black"><font color="#0000FF">X</font><font color="#0000FF">等</font></td>
  38. <td width="51" height="16" style="border:solid 1px black"><font color="#0000FF">Y等</font></td>
  39. <td width="51" height="16" style="border:solid 1px black"><font color="#0000FF">Z等</font></td></tr>
  40. <tr><td width="66" height="12" style="border:solid 1px black"><span style="font-family:Wingdings;font-size:25px;" >&#254;</span>X001</td>
  41. <td width="51" height="12" style="border:solid 1px black"><strike>Y001</strike></td>
  42. <td width="51" height="44" rowspan="3" style="border:solid 1px black">
  43. <ol style="list-style-type:upper-alpha;list-style-position:inside;">
  44. <li>Z001</li>
  45. <li>Z002</li>
  46. <li>Z003</li>
  47. <li>Z004</li>
  48. <li>Z005</li>
  49. </ol>
  50. </td></tr>
  51. <tr><td width="30%" height="16" style="border:solid 1px black"><strong>X002</strong></td>
  52. <td width="51" height="16" style="border:solid 1px black"><u>Y002</u><span style="visibility: hidden">hidesome</span></td></tr>
  53. <tr><td width="30%" height="16" style="border:solid 1px black"><span style="text-decoration: overline">X003</span>
  54. </td><td width="40%" height="16" style="border:solid 1px black"><em>Y003</em><input type="radio" name="R1"><input type="radio" name="R1" checked></td></tr> </table>
  55. </div>
  56. <p>1:若只打印《表单一》,看一下<a href="javascript:prn1_preview()">打印预览</a>,可<a href="javascript:prn1_print()">直接打印</a>也可
  57. <a href="javascript:prn1_printA()">选择打印机</a>打印。<br><br>
  58. 2:若《表单一》和《表单二》一起并列输出,看一下<a href="javascript:prn2_preview()">打印预览</a>,其布局风格可<a href="javascript:prn2_manage()">打印维护</a>调整。
  59. <p>3:若打印整个页面,看看<a href="javascript:prn3_preview()">打印预览</a>。<br><br>
  60. 本例要点是用Document的innerHTML方法把打印目标的超文本送给控件。
  61. <p><a href="PrintSampIndex.html">&lt;&lt;回样例目录</a>
  62. </p>
  63. <script language="javascript" type="text/javascript">
  64. var LODOP; //声明为全局变量
  65. function prn1_preview() {
  66. CreateOneFormPage();
  67. LODOP.PREVIEW();
  68. };
  69. function prn1_print() {
  70. CreateOneFormPage();
  71. LODOP.PRINT();
  72. };
  73. function prn1_printA() {
  74. CreateOneFormPage();
  75. LODOP.PRINTA();
  76. };
  77. function CreateOneFormPage(){
  78. LODOP=getLodop();
  79. LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_表单一");
  80. LODOP.SET_PRINT_STYLE("FontSize",18);
  81. LODOP.SET_PRINT_STYLE("Bold",1);
  82. LODOP.ADD_PRINT_TEXT(50,231,260,39,"打印页面部分内容");
  83. LODOP.ADD_PRINT_HTM(88,200,350,600,document.getElementById("form1").innerHTML);
  84. };
  85. function prn2_preview() {
  86. CreateTwoFormPage();
  87. LODOP.PREVIEW();
  88. };
  89. function prn2_manage() {
  90. CreateTwoFormPage();
  91. LODOP.PRINT_SETUP();
  92. };
  93. function CreateTwoFormPage(){
  94. LODOP=getLodop();
  95. LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_表单二");
  96. LODOP.ADD_PRINT_RECT(70,27,634,242,0,1);
  97. LODOP.ADD_PRINT_TEXT(29,236,279,38,"页面内容改变布局打印");
  98. LODOP.SET_PRINT_STYLEA(2,"FontSize",18);
  99. LODOP.SET_PRINT_STYLEA(2,"Bold",1);
  100. LODOP.ADD_PRINT_HTM(88,40,321,185,document.getElementById("form1").innerHTML);
  101. LODOP.ADD_PRINT_HTM(87,355,285,187,document.getElementById("form2").innerHTML);
  102. LODOP.ADD_PRINT_TEXT(319,58,500,30,"注:其中《表单一》按显示大小,《表单二》在程序控制宽度(285px)内自适应调整");
  103. };
  104. function prn3_preview(){
  105. LODOP=getLodop();
  106. LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_全页");
  107. LODOP.ADD_PRINT_HTM(0,0,"100%","100%",document.documentElement.innerHTML);
  108. LODOP.PREVIEW();
  109. };
  110. </script>
  111. </body>
  112. </html>