首页
所有分类
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 相关文章推荐
DOM 脚本编程中的兄弟节点
Oct 31 Javascript
JQUERY操作JSON实例代码
Feb 09 Javascript
Javascript 实用小技巧
Apr 07 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
Jul 04 Javascript
Node.js中HTTP模块与事件模块详解
Nov 14 Javascript
js注入 黑客之路必备！
Sep 14 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 Javascript
vue组件生命周期详解
Nov 07 Javascript
vue组件实现可搜索下拉框扩展
Oct 23 Javascript
详解Vue iview IE浏览器不兼容报错（Iview Bable polyfill）
Jan 07 Javascript
JavaScript Array对象使用方法解析
Sep 24 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 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
Windows Server(4) dataBinding(1) Hive(5) HttpClient(1) Windows Server 2022(3) NTP(1) RestTemplate(1) Quartz(1) K8s(1) ip2region(1)
You might like
php调用C代码的实现方法
2014/03/11 PHP
PHP采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
Laravel 5 学习笔记
2015/03/06 PHP
php文件读取方法实例分析
2015/06/20 PHP
PHP去掉json字符串中的反斜杠\及去掉双引号前的反斜杠
2015/09/30 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
js的表单操作 简单计算器
2011/12/29 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
2016/06/13 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
python自带的http模块详解
2016/11/06 Python
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
python微信聊天机器人改进版(定时或触发抓取天气预报、励志语录等,向好友推送)
2019/04/25 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
ubuntu16.04升级Python3.5到Python3.7的方法步骤
2020/08/20 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
毕业生个人求职信范文分享
2014/01/05 职场文书
中学生获奖感言
2014/02/04 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
维稳工作情况汇报
2014/10/27 职场文书
大学团日活动总结书
2015/05/11 职场文书
孔子观后感
2015/06/08 职场文书
恋恋笔记本观后感
2015/06/16 职场文书