记录一下
实现打印功能需电脑已经连接打印机(打印什么类型的东西就连接相应的打印机 （普通大打印机 打印标签 打印发票各种打印机）)和已经安装好lodop控件
控件可到官网进行下载 http://www.lodop.net/demo.html
首先引用js
<script type="text/javascript" src="http://127.0.0.1:9999/CLodopfuncs.js?priority=1"></script>
这里的9999 指的是我电脑上安装好lodop控件的端口号 我设置的是9999 默认的是8000点击设置也可以更改
1 <script type="text/javascript" src="jquery.min.js"></script> 2 <script type="text/javascript" src="http://127.0.0.1:9999/CLodopfuncs.js?priority=1"></script> 3 <script type="text/javascript"> 7 4 //打印 5 function print() { 6 var html = $("#printMedicineHtml").html(); 7 html = "<style>" + $("#style1").html() + "</style>" + html; 8 LODOP.SET_PRINT_PAGESIZE(3, 1500, "", ""); //设置纸张 9 LODOP.SET_PRINT_MODE("POS_BASEON_PAPER", true); //设置以纸张边缘为基点 10 LODOP.SET_PRINT_STYLE("FontSize", 11); //设置字体 11 LODOP.ADD_PRINT_HTM(2, 2, "100%", "100%", html); 12 LODOP.PREVIEW();//打印预览 13 //LODOP.PRINT(); //直接打印 14 } 15 16 </script>
常用打印控件js，可适当参考使用
1 var LODOP; 2 //打印预览 3 function print_preview(){ 4 LODOP.PREVIEW(); 5 } 6 //直接打印 7 // function print(){ 8 // LODOP.PRINT(); 9 // } 10 //选择打印机 11 function print_printA(){ 12 LODOP.PRINTA(); 13 } 14 //打印维护 15 function printSetup(){ 16 LODOP.PRINT_SETUP(); 17 } 18 //打印设计 19 function printDesign(){ 20 LODOP.PRINT_DESIGN(); 21 } 22 23 </script> 24 <body> 25 26 <div class="toolbar"> 27 <input type="button" value="打印预览" onclick="print_preview()"> 28 <input type="button" value="直接打印" onclick="print()"> 29 <input type="button" value="选择打印机" onclick="print_printA()"> 30 <input type="button" value="打印维护" onclick="printSetup()"> 31 <input type="button" value="打印设计" onclick="printDesign()"> 32 </div> 33 </body>
案例：
1 <html> 2 <head> 3 <title>预约挂号</title> 4 <script type="text/javascript" src="jquery.min.js"></script> 5 <script type="text/javascript" src="http://127.0.0.1:9999/CLodopfuncs.js?priority=1"></script> 6 <script type="text/javascript"> 7 8 //打印 9 function print() { 10 var html = $("#printMedicineHtml").html(); 11 html = "<style>" + $("#style1").html() + "</style>" + html; 12 LODOP.SET_PRINT_PAGESIZE(3, 1500, "", ""); //设置纸张 13 LODOP.SET_PRINT_MODE("POS_BASEON_PAPER", true); //设置以纸张边缘为基点 14 LODOP.SET_PRINT_STYLE("FontSize", 11); //设置字体 15 LODOP.ADD_PRINT_HTM(2, 2, "100%", "100%", html); 16 LODOP.PREVIEW();//打印预览 17 //LODOP.PRINT(); //直接打印 18 } 19 20 </script> 21 </head> 22 <body> 23 <style id="style1"> 24 .content_all { 25 border: 0px solid gray; 26 } 27 28 .content_all .one { 29 position: relative; 30 } 31 32 .content_all .one { 33 width: 100%; 34 border-bottom: 1px dashed gray; 35 padding: 0 0 10px 0; 36 } 37 38 .content_all .two { 39 width: 100%; 40 border-bottom: 1px solid gray; 41 padding: 0 0 10px 0; 42 } 43 44 .content_all .one tr:nth-child(2) td { 45 font-size: 22px; 46 text-align: center; 47 color: #2b2b2b; 48 font-weight: bold; 49 } 50 51 .content_all .one tr:nth-child(3) td { 52 padding-top: 10px; 53 } 54 55 .content_all .two { 56 margin-top: 5px; 57 } 58 59 .content_all .two tr, .content_all .one tr { 60 line-height: 25px; 61 } 62 63 .content_all .two tr td { 64 width: 100%; 65 } 66 67 .content_all .two tr:first-child td { 68 color: #2b2b2b; 69 font-weight: bold; 70 } 71 72 .yaogz { 73 margin: 10px 0 60px 0; 74 } 75 .type {border: 1px solid #888888;text-align: center;line-height: 30px;box-sizing: border-box;padding: 0 10px;float: left;margin-right: 20px; margin-bottom: 10px;} 76 77 .photo{width:13%;height:77px;border:3px solid rgba(158, 158, 158, 0.56);float:right;background-size:cover;background:url("sdsa.png") no-repeat} 78 .table_ylist{padding:0 4%;width:100%;text-align:left;font-size:14px} 79 .table_ylist tr{line-height:15px} 80 .table_ylist tr td{width:16.66%} 81 .tips{margin-top:20px;line-height:15px;font-size:14px} 82 .tips span{width:75px;display:inline-block;border-bottom:1px solid #808080;text-indent:18px} 83 .adress_tips{margin-top:10px} 84 .adress_tips .heal{margin-left:150px} 85 .sp_tip{margin-top:5px;font-size:14px} 86 </style> 87 88 <div id="printMedicineHtml" style="490px;height:580px; margin:0 auto;padding:0; border:0; list-style:none; font-size:14px; line-height: 20px;font-family:微软雅黑,黑体,Arial;"> 89 <div class="content_all"> 90 <div class="commer"> 91 <div style="text-align:center;font-size:18px;margin-right:30px">医馆处方单</div> 92 <div style="border-bottom:1px solid #2b2b2b"> 93 <table style="95%"> 94 <tr> 95 <td style="230px">就诊单号：<span style="margin-left:10px;font-size:30px" id="Prescription2"></span></td> 96 </tr> 97 <tr> 98 <td style="200px">就诊人：<span style="margin-left:10px" id="UserOutpatients"></span></td> 99 <td style="200px">性别：<span style="margin-left:10px" id="Sex"></span></td> 100 </tr> 101 <tr> 102 <td style="200px">年 龄：<span style="margin-left:10px" id="Age"></span></td> 103 <td style="200px">电话：<span style="margin-left:10px" id="UserTel2"></span></td> 104 </tr> 105 <tr> 106 <td style="230px">制药：<span style="margin-left:10px" id="IsDecocting"></span></td> 107 <td style="230px">取药：<span style="margin-left:10px" id="DictPickType"></span></td> 108 </tr> 109 <tr> 110 <td style="230px">类型：<span style="margin-left:10px" id="DictMedicineTypeName"></span></td> 111 <td style="230px">就诊时间：<span style="margin-left:10px" id="AddTime"></span></td> 112 </tr> 113 </table> 114 115 </div> 116 117 </div> 118 </div> 119 </div> 120 121 <input type="button" value="按钮" onclick="print()"> 122 123 124 </body> 125 </html>
案例预览：
更多参考lodop官网http://www.lodop.net/demo.html
或参考手册