javaScript connects to printer and prints receipt example sharing-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

javaScript connects to printer and prints receipt example sharing

小云云

Dec 29, 2017 pm 04:24 PM

javascriptjsprinter

This article mainly shares with you an example of javaScript linking to a printer and printing receipts. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor to take a look, I hope it can help everyone.

As shown below:


<!-- <!DOCTYPE html> -->


<meta>
<script></script>
<script></script>
<script></script>
<script>
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(&#39;image/jpeg&#39;, 1.0);
    var pdf = new jsPDF(&#39;&#39;, &#39;pt&#39;, &#39;a4&#39;);
    //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
    //当内容未超过pdf一页显示的范围，无需分页
    if (leftHeight < pageHeight) {
     pdf.addImage(pageData, &#39;JPEG&#39;, 0, 0, imgWidth, imgHeight );
    } else {
     while(leftHeight > 0) {
      pdf.addImage(pageData, &#39;JPEG&#39;, 0, position, imgWidth, imgHeight)
      leftHeight -= pageHeight;
      position -= 841.89;
      //避免添加空白页
      if(leftHeight > 0) {
       pdf.addPage();
      }
     }
    }
    pdf.save(document.getElementById("emNo").innerText+"("+document.getElementById("dt").innerText+&#39;).pdf&#39;);
   }
  })
  document.getElementById("baocun").style.display = "";
  document.getElementById("dayin").style.display = "";
}
</script>


<p>
 <button><i></i>打印</button>
 <button><i></i>保存</button>
</p>
<!--startprint-->
<br>
 <p>
  </p>

新XXXXX物业服务中心
收费单据
收票类型：电费		缴费日期：	${emfee.dt}
户名	${emfee.userName}	表号	${emfee.emNo}	房号	${emfee.num}
起止时间	${emfee.emDt}至${emfee.startDt}	缴费金额	${emfee.tranMoney}	倍率	${emfee.emRate}
用电量	时段	起止表码	倍率前用量	本次用量	单价	本次电费
尖	${emfee.mosaicJian}	${emfee.jianQuantity}	${emfee.blJian}	${emfee.jian}	${emfee.jianFee}
峰	${emfee.mosaicFeng}	${emfee.fengQuantity}	${emfee.blFeng}	${emfee.feng}	${emfee.fengFee}
平	${emfee.mosaicPing}	${emfee.pingQuantity}	${emfee.blPing}	${emfee.ping}	${emfee.pingFee}
谷	${emfee.mosaicGu}	${emfee.guQuantity}	${emfee.blGu}	${emfee.gu}	${emfee.guFee}
总	${emfee.mosaicZong}	${emfee.quantity}	${emfee.blquantity}	——	${emfee.electFee}
电费	上次剩余(元)	本期已用(元)	本次缴费(元)	本次剩余(元)
${emfee.lastRemainQ}	${emfee.electFee}	${emfee.tranMoney}	${emfee.remainQ}
	收款人：		付款人：

Related recommendations:

javascript print page code_javascript skills

javascript Summary of printing content methods_javascript skills

js client printing html how to remove the header and footer

JS partial printing method

JavaScript loop practice method of printing triangles, factorials, and multiplication tables

The above is the detailed content of javaScript connects to printer and prints receipt example sharing. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn