javaScript 连接打印机,打印小票的实例-偶像资源网

如下所示：
<%@ 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 连接打印机,打印小票的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
THE END
javaScript 连接打印机,打印小票的实例

请登录后发表评论
