前些天发现一个不错的打印的控件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>

View Code

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>

View Code

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");
            //LODOP.SET_SHOW_MODE("LANDSCAPE_DEFROTATED", 1);//如果是横向时则正向显示【旋转】
            //注解：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>

View Code

具体步骤就是这样，是不是很简单呢！

Demo下载：LodopDemo.7z