首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

javaScript 连接打印机,打印小票的实例

Posted in Javascript onDecember 29, 2017

如下所示：

<%@ 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 连接打印机,打印小票的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

javaScript 连接打印机,打印小票的实例

- Author -

李忠祥

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript处理DOM元素事件实现代码
May 23 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
Dec 20 Javascript
JS获取网页属性包括宽、高等等
Apr 03 Javascript
同步文本框内容JS代码实现
Aug 04 Javascript
微信小程序 devtool隐藏的秘密
Jan 21 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
微信小程序 五星评分的实现实例
Aug 04 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
通过jQuery学习js类型判断的技巧
May 27 jQuery
node.js实现上传文件功能
Jul 15 Javascript
JS实现动态星空背景效果
Nov 01 Javascript
vue+AI智能机器人回复功能实现
Jul 16 Javascript
深入浅析vue组件间事件传递
Dec 29 #Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 #Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 #Javascript
node简单实现一个更改头像功能的示例
Dec 29 #Javascript
JavaScript 中使用 Generator的方法
Dec 29 #Javascript
js中url对象化管理分析
Dec 29 #Javascript
JS计算距当前时间的时间差实例
Dec 29 #Javascript
数据重复(1) element-china-area-data(1) self(1) tabBar(1) uniapp(4) SpringBoot(22) Navigator(1) capture(1) MybatisPlus(2) Flutter(2)
You might like
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
PHP微信PC二维码登陆的实现思路
2017/07/13 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
PHP+Apache环境中如何隐藏Apache版本
2017/11/24 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
JavaScript 格式字符串的应用
2010/03/29 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
JavaScript在XHTML中的用法详解
2013/04/11 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
2015/04/10 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
Express框架之connect-flash详解
2017/05/31 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
python使用Matplotlib画饼图
2018/09/25 Python
python 将对象设置为可迭代的两种实现方法
2019/01/21 Python
Python爬虫使用浏览器cookies：browsercookie过程解析
2019/10/22 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
python颜色随机生成器的实例代码
2020/01/10 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
利用python生成照片墙的示例代码
2020/04/09 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
应届生求职推荐信
2013/10/28 职场文书
挖掘机司机岗位职责
2014/02/12 职场文书
厨房管理计划书
2014/04/27 职场文书
毕业论文评语大全
2014/04/29 职场文书
土建工程师岗位职责
2014/06/10 职场文书
房屋登记授权委托书范本
2014/10/09 职场文书
临时工聘用合同协议书
2014/10/29 职场文书