javaScript 链接打印机，打印小票

最新推荐文章于 2024-07-10 09:41:19 发布
最新推荐文章于 2024-07-10 09:41:19 发布
阅读量3.3k 收藏 2
点赞数
分类专栏： JavaScript 打印 文章标签： javascript 打印
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35826579/article/details/78914657
版权
<%@ 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" οnclick="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" οnclick="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>
李忠祥
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js打印小票（用iframe实现）
qq_42972375的博客
10-17 1891
注意：js打印小票我知道的有俩种实现方式：iframe和window.open方式，因为window.open点击下载之后浏览器会自动新建网页，所以我用的是iframe 我用iframe的具体实现方式 应用场景点击详情页可看到交易数据然后点击打印小票 实现方式：iframe标签是在详情页A.jsp,然后新建B.jsp排版好小票内容再将所需要的数据从详情页A.jsp传到B.jsp A.jsp: function printdetails() { var url = "B.jsp?"+ "submchn
佳博GP-58L 小票打印机 js局部打印案例
08-27
佳博GP-58L 小票打印机 js局部打印案例
vue 实现打印功能
烟雨任平生╰的博客
11-05 1112
最新项目要实现页面打印功能，尝试了不少方法，感觉这个方法还是比较好用，提供这个方法的博客链接不记得，挺感谢的。 不说了 上代码： print.js代码： // 打印类属性、方法定义 /* eslint-disable */ const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({
前端直连小票打印机，前端静默打印，js静默打印解决方案
最新发布
搬砖小白灿哥哥
07-10 1236
最近公司开发了一个vue3收银系统，需要使用小票打印机打印小票，但是又不想结账的时候弹出打印预览，找了很多方案，解决不了js打印弹出的打印预览窗口！没办法，自己写了一个winform版本的静默打印软件，开源，开源，还是特么的开源！软件预览：软件功能：1、支持前端直接使用canvas 导出base64图片直接打印2、支持word，pdf文件打印3、支持开机启动4、支持mqtt协议，支持远程打印，实现打印机共享功能5、完全免费，服务器用的是阿里云99块一年的，如有需要可以自己部署。
js 打印小票
qq_35836269的博客
11-22 2312
jcp打印插件 由于公司项目需要，需要写个打印小票的功能，在网上找啊找啊，确定了4Fang，调试成功之后，传上测试环境，天啦噜的，测试环境的打印功能竟然不行，在本地行，在测试或者正式上就不行，这是什么大头鬼，多方求证，4Fang打印需要获取一个授权码才能在服务器上部署，官网上说可以免费获取，那就获取呗，我按照官网上的步骤一步一步，还是没获到那个码。你可以试试，我是尽力了~~~ 一番折腾之后选择了j...
（打印机Printer）小票打印
weixin_40333655的博客
10-18 566
源码路径为 E:\WGY\C#学习\一套开源的企业业务系统框架Winform\586570 31天学会CRM项目开发pdf+源代码\31天学会CRM项目开发-源代码\003 实例及拓展练习\PrintDemo 设计的WMI操作参考https://blog.csdn.net/u011854789/article/details/52792083 using System; using System....
javaScript 连接打印机,打印小票的实例
10-18
本文将向大家介绍如何使用JavaScript连接打印机并打印小票。在这个过程中，我们将利用现有的前端技术和第三方库来实现从网页内容到打印机输出的完整流程。 首先，我们来看一些基础概念和技术要点。在实现打印小票...
h5+连接蓝牙打印机打印小票
12-09
本主题探讨的是如何利用H5与蓝牙打印机进行交互，实现小票的无线打印功能。这一技术常用于餐饮、零售等需要快速、便捷打印服务的场景。 首先，我们要了解H5是如何连接蓝牙设备的。在H5中，我们通常借助Web ...
web前端页面通过BrowserPrint API连接斑马打印机进行RFID条形码贴纸打印
05-15
本文将介绍如何使用JavaScript和斑马打印机的BrowserPrint API来打印RFID二维码贴纸。 通过使用JavaScript和BrowserPrint API，开发者可以轻松地将斑马打印机集成到Web应用中，实现从浏览器直接控制打印任务。这种...
javascript编写基于chrome浏览器的打印程序,本例用来打印小票.zip
01-08
小票打印 <!-- 这里填写你要打印的小票内容 --> <!-- 小票的具体内容如商品名称、数量、价格等 --> window.onload = function() { // 在页面加载完成后立即调用打印 window.print(); }; ``` 这...
一种基于浏览器的自动小票机打印实现方案(js版)
热门推荐
lhcseesea的博客
04-14 1万+
1、使用场景 用户在浏览器做了某项操作后，自动打印小票。 2、测试方式 2.1 JavaScript实现 尝试了很多办法，最终都会出现一个弹出框，让用户选择打印机。不符合我们需求。 2.2 lodop 功能比较强大，但是收费的。暂不考虑。 2.3 PAZU 功能也很强大，免费许可。非常赞！ 详情：PAZU -- 四方在线WEB打印控件DEM
jquery调用打印机打印
06-17
一个比较简单的打印页面，票据或者小票之类的前端工具，只需简单设置就能打印发票各种了。
通过Web打印超市一样的小票
04-21
通过Web打印超市一样的小票。测试可以使用。。。
js+web调用打印机代码
08-27
js调用打印机代码,可以直接对网页进行打印预览，设置，打印
资江小票打印机js实现web打印（web通用打印）
Speechless_的博客
09-04 7408
参数 默认值 接收值 描述 globalStyles true Boolean 是否包含父文档的样式 mediaPrint false Boolean 是否包含media='print'的链接标签。会被globalStyles选项覆盖 stylesheet null URL-string 外部样式表的URL地址 noPrintSelector ".no-print" 任何可用的jQuery选择器 不想打印的元素的jQuery选择器 iframe 默认true，如果没有iframe选择器被
javascript 打印_如何创建JavaScript打印链接
Web 开发&软件开发
07-23 385
如何创建JavaScript打印链接 经常，新手网络用户不会考虑做某事，除非他们被告知可以这样做。 我发现我做的许多网站都是如此。 我已经向客户网站添加了“发送给朋友的电子邮件”功能，并且访问量似乎有所增加（尽管有所增加，但一点点都有帮助）。 通过添加JavaScript“打印”链接可以帮助某些网站。 例如，如果您有一个带有优惠券的页面，或者是一个用作促销品的页面，那么我建议添加一个...
前端小票打印插件
zhaomingzhe的博客
02-27 2644
百度自己搜LODOP
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值