PrintSample37.html 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  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;&nbsp; 传统方式打印公章都是把图片的z-index设为负值,这其实是把公章图以背景形式输出,</p>
  11. <p>但实际上公章应该在字的上面,也就是“先字后章”才对,Lodop通过设置transcolor属性实现了该效果,</p>
  12. <p>进入如下的<a href="javascript:myPreview1()">打印预览</a>看看,注意左右两个公章图在预览时与文字的层次差别。</p>
  13. <div id="div1">
  14. <table border="1" width="611" style="border-collapse: collapse" bordercolor="#000000">
  15. <tr><td width="100%" colspan="2" style="border:1px solid"><div align="center">证明函</div></td></tr>
  16. <tr>
  17. <td width="100%" height="35" colspan="2" style="border:1px solid">&nbsp; 事宜:兹证明郭德强先生在本部门的所有借款全部还清。2011年1月6日。</td>
  18. </tr>
  19. <tr>
  20. <td width="45%" height="156" style="border:1px solid">&nbsp;&nbsp;
  21. <p>财务部门名称(盖章):</p>
  22. <p>集团公司金融投资管理部</p>
  23. <p> </p>
  24. </td>
  25. <td width="55%" height="156" style="border:1px solid"> 
  26. <p>所在单位名称(盖章):</p>
  27. <p>集团公司第二销售分公司</p>
  28. <p> </p></td>
  29. </tr>
  30. </table>
  31. <img border="0" src="http://www.lodop.net/demolist/PrintSample37.png"
  32. style="z-index: -1; position: absolute; left:100px; top:230px;" />
  33. <img border="0" transcolor="#FFFFFF" src="http://www.lodop.net/demolist/PrintSample37.png"
  34. style="z-index: -1; position: absolute; left:350px; top:230px;" />
  35. </div>
  36. <p>要实现右边的“后盖章”效果,需要图片本身透色部分要纯正(白则“纯”白)。</p>
  37. <p><a href="PrintSampIndex.html">&lt;&lt;回样例目录</a></p>
  38. <script language="javascript" type="text/javascript">
  39. var LODOP; //声明为全局变量
  40. function myPreview1() {
  41. LODOP=getLodop();
  42. LODOP.PRINT_INIT("打印插件功能演示_Lodop功能_打印公章");
  43. LODOP.ADD_PRINT_HTM(0,0,"100%","100%",document.documentElement.innerHTML);
  44. LODOP.PREVIEW();
  45. };
  46. </script>
  47. </body>
  48. </html>