这篇文章主要介绍了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 >
<button id="dayin" onclick="doPrint()" class="" ><i class="fa fa-print"></i>打印</button>
<button id="baocun" onclick="downPdf()" class="" ><i class="fa fa-print"></i>保存</button>
</div>
<!--startprint-->
<br>
<div id="print" >
<table >
<tr>
<td colspan="8" >新XXXXX物业服务中心</td>
</tr>
<tr >
<td colspan="8">收费单据</td>
</tr>
<tr>
<td colspan="2">收票类型：电费</td>
<td colspan="3"></td>
<td>缴费日期：</td>
<td colspan="2" id="dt">${emfee.dt}</td>
</tr>
<tr>
<td >户名</td>
<td >${emfee.userName}</td>
<td >表号</td>
<td id="emNo" colspan="2" >${emfee.emNo}</td>
<td >房号</td>
<td colspan="2" >${emfee.num}</td>
</tr>
<tr>
<td >起止时间</td>
<td colspan="3" >${emfee.emDt}至${emfee.startDt}</td>
<td >缴费金额</td>
<td >${emfee.tranMoney}</td>
<td >倍率</td>
<td >${emfee.emRate}</td>
</tr>
<tr>
<td rowspan="6" >用电量</td>
<td >时段</td>
<td colspan="2" >起止表码</td>
<td >倍率前用量</td>
<td >本次用量</td>
<td >单价</td>
<td >本次电费</td>
</tr>
<tr>
<td >尖</td>
<td colspan="2" >${emfee.mosaicJian}</td>
<td >${emfee.jianQuantity}</td>
<td >${emfee.blJian}</td>
<td >${emfee.jian}</td>
<td >${emfee.jianFee}</td>
</tr>
<tr>
<td >峰</td>
<td colspan="2" >${emfee.mosaicFeng}</td>
<td >${emfee.fengQuantity}</td>
<td >${emfee.blFeng}</td>
<td >${emfee.feng}</td>
<td >${emfee.fengFee}</td>
</tr>
<tr>
<td >平</td>
<td colspan="2" >${emfee.mosaicPing}</td>
<td >${emfee.pingQuantity}</td>
<td >${emfee.blPing}</td>
<td >${emfee.ping}</td>
<td >${emfee.pingFee}</td>
</tr>
<tr>
<td >谷</td>
<td colspan="2" >${emfee.mosaicGu}</td>
<td >${emfee.guQuantity}</td>
<td >${emfee.blGu}</td>
<td >${emfee.gu}</td>
<td >${emfee.guFee}</td>
</tr>
<tr>
<td >总</td>
<td colspan="2" >${emfee.mosaicZong}</td>
<td >${emfee.quantity}</td>
<td >${emfee.blquantity}</td>
<td >——</td>
<td >${emfee.electFee}</td>
</tr>
<tr>
<td rowspan="2" >电费</td>
<td >上次剩余(元)</td>
<td colspan="2" >本期已用(元)</td>
<td colspan="2" >本次缴费(元)</td>
<td colspan="2" >本次剩余(元)</td>
</tr>
<tr>
<td >${emfee.lastRemainQ}</td>
<td colspan="2" >${emfee.electFee}</td>
<td colspan="2" >${emfee.tranMoney}</td>
<td colspan="2" >${emfee.remainQ}</td>
</tr>
<tr>
<td colspan="2" ></td>
<td >收款人：</td>
<td colspan="2" ></td>
<td >付款人：</td>
<td colspan="2" ></td>
</tr>
</table>
<!--b-->
</div>
</body>
</html>感谢你能够认真阅读完这篇文章，希望小编分享的“javaScript如何连接打印机打印小票”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!
