标签:
前些天发现一个不错的打印的控件Lodop,下面就来介绍一下具体使用!
首先到官网:http://www.lodop.net/download.html 下载最新版,文档的话官网中有很详细的介绍,这里演示的是6.198版本
1.首先导入JS
<script src="Scripts/LodopFuncs.js"></script>
2.制作一个简单的页面
<div style="margin-bottom: 10px; margin-top: 10px; text-align: center"> <input type="button" value="打印预览" onclick="printView()" /> <input type="button" value="打印" onclick="ptint()" /> </div> <table class="m_table" id="m_table"> <tr> <th>作者</th> <th>歌曲名</th> <th>国籍</th> </tr> <tr> <td>Bob Dylan</td> <td>Empire Burlesque</td> <td>USA</td> </tr> <tr> <td>Bonnie Tyler</td> <td>Hide your heart</td> <td>UK</td> </tr> <tr> <td>Dolly Parton</td> <td>Greatest Hits</td> <td>USA</td> </tr> <tr> <td>Gary Moore</td> <td>Still got the blues</td> <td>UK</td> </tr> <tr> <td>Eros Ramazzotti</td> <td>Eros</td> <td>EU</td> </tr> <tr> <td>Bee Gees</td> <td>One night only</td> <td>UK</td> </tr> <tr> <td>Dr.Hook</td> <td>Sylvias Mother</td> <td>UK</td> </tr> <tr> <td>Rod Stewart</td> <td>Maggie May</td> <td>UK</td> </tr> <tr> <td>Andrea Bocelli</td> <td>Romanza</td> <td>EU</td> </tr> <tr> <td>Percy Sledge</td> <td>When a man loves a woman</td> <td>USA</td> </tr> <tr> <td>Savage Rose</td> <td>Black angel</td> <td>EU</td> </tr> <tr> <td>Many</td> <td>1999 Grammy Nominees</td> <td>USA</td> </tr> <tr> <td>Kenny Rogers</td> <td>For the good times</td> <td>UK</td> </tr> <tr> <td>Will Smith</td> <td>Big Willie style</td> <td>USA</td> </tr> <tr> <td>Van Morrison</td> <td>Tupelo Honey</td> <td>UK</td> </tr> <tr> <td>Cat Stevens</td> <td>the very best of</td> <td>UK</td> </tr> <tr> <td>Sam Brown</td> <td>Stop</td> <td>UK</td> </tr> <tr> <td>T‘Pau</td> <td>Bridge of Spies</td> <td>UK</td> </tr> <tr> <td>Tina Turner</td> <td>Private Dancer</td> <td>UK</td> </tr> <tr> <td>Kim Larsen</td> <td>Midt om natten</td> <td>EU</td> </tr> <tr> <td>Luciano Pavarotti</td> <td>Pavarotti Gala Concert</td> <td>UK</td> </tr> <tr> <td>Otis Redding</td> <td>the dock of the bay</td> <td>USA</td> </tr> <tr> <td>Simply Red</td> <td>Picture book</td> <td>EU</td> </tr> <tr> <td>the Communards</td> <td>Red</td> <td>UK</td> </tr> <tr> <td>Joe Cocker</td> <td>Unchain my heart</td> <td>USA</td> </tr> </table> <div id="twoT" style="display:none"><span style="font-size:30px">第二页</span></div>
3.页面CSS
<style type="text/css" id="printCss"> body { /*不设置的话会变成系统窗口自定义的颜色*/ background: #fff; } .m_table { font-size: 14px; border: solid 1px black; border-collapse: collapse; width: 90%; margin: auto; } .m_table td, th { text-align: center; border: 1px solid black; padding: 3px; } </style>
4.页面JS
<script type="text/javascript"> function printView() { if (createPrintPage()) { LODOP.PREVIEW(); } else { alert("您的浏览器不支持预览功能,请直接打印!"); } } function ptint() { if (createPrintPage()) { LODOP.PRINT(); alert("打印完成!"); } else { window.print(); } } var LODOP; //声明为全局变量 //创建需要打印的页面 function createPrintPage() { LODOP = getLodop(); if (!LODOP) { return false; } var strBodyStyle = "<style type=\"text/css\">" + document.getElementById("printCss").innerHTML + "</style>"; var html = document.getElementById("m_table").innerHTML; html = "<table class=\"m_table\">" + html + "</table>"; var strBodyHtml = strBodyStyle + "<body>" + html + "</body>"; //设置纸张大小,具体设置请参考文档:http://www.lodop.net/uploads/file/sample/PrintSample5.html LODOP.SET_PRINT_PAGESIZE(0, 0, 0, "A4"); //注解:ADD_PRINT_HTM(Top,Left,Width,Height,strHtml) LODOP.ADD_PRINT_HTM(20, 36, "100%", "100%", strBodyHtml); LODOP.NEWPAGE(); //强制分页 strBodyHtml = strBodyStyle + "<div>" + document.getElementById("twoT").innerHTML + "</div>"; LODOP.ADD_PRINT_HTM(100, 50, "100%", "100%", strBodyHtml); return true; } </script>
具体步骤就是这样,是不是很简单呢!
Demo下载:LodopDemo.7z
标签:
原文地址:http://www.cnblogs.com/zuqing/p/lodop_use.html