javaScript如何連接打印機打印小票

發(fā)布時間：2021-07-23 13:44:34 來源：億速云閱讀：577 作者：小新欄目：web開發(fā)

這篇文章主要介紹了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');
    //有兩個高度需要區(qū)分，一個是html頁面的實際高度，和生成pdf的頁面高度(841.89)
    //當(dāng)內(nèi)容未超過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物業(yè)服務(wù)中心</td>
   </tr>
   <tr >
    <td colspan="8">收費單據(jù)</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如何連接打印機打印小票”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

向AI問一下細節(jié)

javaScript如何連接打印機打印小票

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽