首页
所有分类
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 相关文章推荐
js 绑定带参数的事件以及手动触发事件
Apr 27 Javascript
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
Jan 17 Javascript
浅谈JavaScript function函数种类
Dec 29 Javascript
悬浮广告方法日常收集整理
Mar 18 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
vue-dialog的弹出层组件
May 25 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
JavaScript中this用法学习笔记
Mar 17 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
详解如何在Javascript中使用Object.freeze()
Oct 18 Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 24 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
LOGO(1) 抖音(1) most_common(1) Xpath(1) binlog(2) 爬虫(2) Counter(1) 写入策略(1) redo log(1) MIME(1)
You might like
javascript跟随滚动效果插件代码（javascript Follow Plugin）
2013/08/03 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
如何用js 实现依赖注入的思想，后端框架思想搬到前端来
2015/08/03 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
vue 属性拦截实现双向绑定的实例代码
2018/10/24 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
js+cavans实现图片滑块验证
2020/09/29 Javascript
python中partial()基础用法说明
2018/12/30 Python
在PyCharm的 Terminal（终端）切换Python版本的方法
2019/08/02 Python
python tkinter canvas使用实例
2019/11/04 Python
Python Numpy数组扩展repeat和tile使用实例解析
2019/12/09 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
详解python内置常用高阶函数(列出了5个常用的)
2020/02/21 Python
python通用读取vcf文件的类（复制粘贴即可用）
2020/02/29 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
英国家喻户晓的折扣商场：TK Maxx
2017/05/26 全球购物
贝玲妃英国官网：Benefit英国
2018/02/03 全球购物
世界领先的豪华床上用品供应商之一：Bedeck Home
2019/03/18 全球购物
高中化学教学反思
2014/01/13 职场文书
服务员自我评价
2014/01/25 职场文书
品酒会策划方案
2014/05/26 职场文书
党性教育心得体会
2014/09/03 职场文书
标准单位租车协议书
2014/09/23 职场文书
导游词之上海杜莎夫人蜡像馆
2019/11/22 职场文书
html form表单基础入门案例讲解
2021/07/21 HTML / CSS