javaScript 连接打印机,打印小票的实例
程序员文章站
2022-08-10 10:16:19
如下所示:
<%@ page contenttype="text/html;charset=utf-8"%>
<%@ include file...
如下所示:
<%@ page contenttype="text/html;charset=utf-8"%> <%@ include file="/webpage/include/taglib.jsp"%> <!-- <!doctype html> --> <html> <head> <meta name="decorator" content="default" /> <script type="text/javascript" src="${ctxstatic}/jquery-ztree/3.5.12/js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="${ctxstatic}/newstyle/jspdf.debug.js"></script> <script type="text/javascript" src="${ctxstatic}/newstyle/html2canvas.js"></script> <script type="text/javascript"> function doprint(){ bdhtml=window.document.body.innerhtml; sprnstr="<!--startprint-->"; eprnstr="<!--b-->"; prnhtml=bdhtml.substr(bdhtml.indexof(sprnstr)+17); prnhtml=prnhtml.substring(0,prnhtml.indexof(eprnstr)); window.document.body.innerhtml=prnhtml; window.print(); top.layer.closeall(); } function closes (){ top.layer.closeall(); } function downpdf(){ document.getelementbyid("dayin").style.display = "none"; document.getelementbyid("baocun").style.display = "none"; html2canvas(document.body, { onrendered:function(canvas) { var contentwidth = canvas.width; var contentheight = canvas.height; //一页pdf显示html页面生成的canvas高度; var pageheight = contentwidth / 592.28 * 841.89; //未生成pdf的html页面高度 var leftheight = contentheight; //pdf页面偏移 var position = 0; //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高 var imgwidth = 595.28; var imgheight = 592.28/contentwidth * contentheight; var pagedata = canvas.todataurl('image/jpeg', 1.0); var pdf = new jspdf('', 'pt', 'a4'); //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89) //当内容未超过pdf一页显示的范围,无需分页 if (leftheight < pageheight) { pdf.addimage(pagedata, 'jpeg', 0, 0, imgwidth, imgheight ); } else { while(leftheight > 0) { pdf.addimage(pagedata, 'jpeg', 0, position, imgwidth, imgheight) leftheight -= pageheight; position -= 841.89; //避免添加空白页 if(leftheight > 0) { pdf.addpage(); } } } pdf.save(document.getelementbyid("emno").innertext+"("+document.getelementbyid("dt").innertext+').pdf'); } }) document.getelementbyid("baocun").style.display = ""; document.getelementbyid("dayin").style.display = ""; } </script> </head> <body > <div style="width: 800px;height: 35px;"> <button id="dayin" onclick="doprint()" class="" style="border-bottom:1px solid #0071ce;float: right;background: #0071ce;color:rgb(255, 255, 255);font-size:13px;margin-right: 10px; margin-top: 10px;"><i class="fa fa-print"></i>打印</button> <button id="baocun" onclick="downpdf()" class="" style="border-bottom:1px solid #0071ce;float: right;background: #0071ce;color:rgb(255, 255, 255);font-size:13px;margin-right: 10px; margin-top: 10px;"><i class="fa fa-print"></i>保存</button> </div> <!--startprint--> <br> <div id="print" style="padding-left: 15px; padding-right: 15px;"> <table style="width: 100%"> <tr> <td colspan="8" style="text-align: center;font-size: 20px;">新xxxxx物业服务中心</td> </tr> <tr > <td colspan="8"style="text-align: center;font-size: 14px;padding-top: 10px;">收费单据</td> </tr> <tr> <td colspan="2">收票类型:电费</td> <td colspan="3"></td> <td>缴费日期:</td> <td colspan="2" id="dt">${emfee.dt}</td> </tr> <tr> <td style="text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">户名</td> <td style="text-align: center ;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">${emfee.username}</td> <td style="text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">表号</td> <td id="emno" colspan="2" style="text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">${emfee.emno}</td> <td style=" text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">房号</td> <td colspan="2" style=" text-align: center ;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">${emfee.num}</td> </tr> <tr> <td style=" text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">起止时间</td> <td colspan="3" style=" text-align: center ;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">${emfee.emdt}至${emfee.startdt}</td> <td style=" text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">缴费金额</td> <td style=" text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">${emfee.tranmoney}</td> <td style="text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">倍率</td> <td style="text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">${emfee.emrate}</td> </tr> <tr> <td rowspan="6" style="width: 12%; text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;">用电量</td> <td style="width: 12%; text-align: center ;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">时段</td> <td colspan="2" style="width: 13%; text-align: center ;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">起止表码</td> <td style="width: 12%; text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">倍率前用量</td> <td style="width: 12%; text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">本次用量</td> <td style="width: 13%; text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">单价</td> <td style="width: 13%; text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">本次电费</td> </tr> <tr> <td style="width: 12%; text-align: center ;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">尖</td> <td colspan="2" style="width: 13%; text-align: center ;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">${emfee.mosaicjian}</td> <td style="width: 12%; text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">${emfee.jianquantity}</td> <td style="width: 12%; text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">${emfee.bljian}</td> <td style="width: 13%; text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">${emfee.jian}</td> <td style="width: 13%; text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">${emfee.jianfee}</td> </tr> <tr> <td style="width: 12%; text-align: center ;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">峰</td> <td colspan="2" style="width: 13%; text-align: center ;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">${emfee.mosaicfeng}</td> <td style="width: 12%; text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">${emfee.fengquantity}</td> <td style="width: 12%; text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">${emfee.blfeng}</td> <td style="width: 13%; text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">${emfee.feng}</td> <td style="width: 13%; text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">${emfee.fengfee}</td> </tr> <tr> <td style="width: 12%; text-align: center ;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">平</td> <td colspan="2" style="width: 13%; text-align: center ;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">${emfee.mosaicping}</td> <td style="width: 12%; text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">${emfee.pingquantity}</td> <td style="width: 12%; text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">${emfee.blping}</td> <td style="width: 13%; text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">${emfee.ping}</td> <td style="width: 13%; text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">${emfee.pingfee}</td> </tr> <tr> <td style="width: 12%; text-align: center ;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">谷</td> <td colspan="2" style="width: 13%; text-align: center ;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">${emfee.mosaicgu}</td> <td style="width: 12%; text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">${emfee.guquantity}</td> <td style="width: 12%; text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">${emfee.blgu}</td> <td style="width: 13%; text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">${emfee.gu}</td> <td style="width: 13%; text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">${emfee.gufee}</td> </tr> <tr> <td style="width: 12%; text-align: center ;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">总</td> <td colspan="2" style="width: 13%; text-align: center ;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">${emfee.mosaiczong}</td> <td style="width: 12%; text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">${emfee.quantity}</td> <td style="width: 12%; text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">${emfee.blquantity}</td> <td style="width: 13%; text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">——</td> <td style="width: 13%; text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;">${emfee.electfee}</td> </tr> <tr> <td rowspan="2" style="text-align: center;font-size: 14px;height:40px;border:1px solid #000000;">电费</td> <td style="width: 12%; text-align: center ;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">上次剩余(元)</td> <td colspan="2" style="width: 13%; text-align: center ;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">本期已用(元)</td> <td colspan="2" style="width: 12%; text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">本次缴费(元)</td> <td colspan="2" style="width: 13%; text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;border-bottom:0px solid #000000;">本次剩余(元)</td> </tr> <tr> <td style="width: 12%; text-align: center ;font-size: 14px;height: 40px;border:1px solid #000000;">${emfee.lastremainq}</td> <td colspan="2" style="width: 13%; text-align: center ;font-size: 14px;height: 40px;border:1px solid #000000;">${emfee.electfee}</td> <td colspan="2" style="width: 12%; text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;">${emfee.tranmoney}</td> <td colspan="2" style="width: 13%; text-align: center;font-size: 14px;height: 40px;border:1px solid #000000;">${emfee.remainq}</td> </tr> <tr> <td colspan="2" style="text-align: center;font-size: 14px;height: 40px;"></td> <td style="text-align: center;font-size: 14px;height: 40px;">收款人:</td> <td colspan="2" style="text-align: center;font-size: 14px;height: 40px;"></td> <td style="text-align:center ;font-size: 14px;height: 40px;">付款人:</td> <td colspan="2" style="text-align:center ;font-size: 14px;height: 40px;"></td> </tr> </table> <!--b--> </div> </body> </html>
以上这篇javascript 连接打印机,打印小票的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。