js版二维码打印

最新推荐文章于 2024-07-23 14:40:32 发布
最新推荐文章于 2024-07-23 14:40:32 发布
阅读量971 收藏
点赞数
文章标签： javascript jquery 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq873113580/article/details/80183427
版权

分页打印标识符号

前置打印的时候下一页

 <div style="page-break-after: always;"></div> 

<style>
    * {
        padding: 0px;
        margin: 0px;
    }
</style>
<script src="jquery.min.js"></script>
<script src="template.js"></script>
<script src="jquery.qrcode.min.js"></script>
<script type="text/javascript">

    function createPrint() {
        var list = eval('(' + $.trim($("#dbContent").val()) + ')');
        var html = template('tpl', { data: list });
        $("#main").append(html);
        $("#divData").remove();
        $(".qrcode").each(function () {
            $(this).qrcode({
                //render: "table", //table方式
                width: 90, //宽度
                height: 90, //高度
                text:$(this).attr("data-id") //任意内容
            });
        });
        var canvas = $('.qrcode canvas')
        var img = canvas[0].toDataURL("image/png")
        $('.qrcode').html("<img src='" + img + "'>")
        //setTimeout(function () {
        //    $(".qrcode").each(function () {
               
        //        $(this).find("table").css("margin", "0px auto");
        //    });
        //},1000);
    }
    function cpint() {
        bdhtml = window.document.body.innerHTML;
        sprnstr = "<!--startprint-->";
        eprnstr = "<!--endprint-->";
        prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);
        prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
        window.document.body.innerHTML = prnhtml;
        window.print();
    }
</script>
<div id="divData" style="width:100%;">
    <button type="button" οnclick="createPrint();" style="height:50px;">生成打印数据,必须为以下格式，必须是偶数</button>
    <textarea id="dbContent" rows="20" style="width:90%;">
        [
        {
        "KHMC": "胜利采油厂",
        "BY5": null,
        "WHR": "wxazbhsy",
        "CARDID": "92b715f7b3c04e839af5db0c5e26b829",
        "BY4": null,
        "BY3": null,
        "BY2": null,
        "BY1": "2018050001",
        "PKID": "7fda66cff1ff4073adff50874190cbc3",
        "WHSJ": "2018-05-03 15:04:21",
        "BZ": null,
        "ISUSE": "0"
        }, {
        "KHMC": "胜利采油厂",
        "BY5": null,
        "WHR": "wxazbhsy",
        "CARDID": "92b715f7b3c04e839af5db0c5e26b828",
        "BY4": null,
        "BY3": null,
        "BY2": null,
        "BY1": "2018050002",
        "PKID": "bd2d1a01e78c445d88e6619844b275ba",
        "WHSJ": "2018-05-03 15:04:21",
        "BZ": null,
        "ISUSE": "0"
        }]
    </textarea>
</div>
<button type="button" οnclick="cpint();" style="height:50px;">打印</button>
<!--startprint--><!--注意要加上html里star和end的这两个标记-->  
<table style="width:100%;" id="main"></table>
<!--endprint-->  
<script id="tpl" type="text/html">
    <%for (var i=0;i < data.length; i++) {%>
    <tr>
        <td style="text-align:center;">
            <div style="height:5px;"></div>
            <div style="width:90%;text-align:center;border:solid 2px black; margin:0px auto;">
                <p style="font-weight:bold;font-size:14px;margin-top:8px;">胜利通海油服福通公司（制氧厂）</p>
                <p style="font-weight: bold; font-size: 15px; margin-top: 5px;">乙炔票（壹瓶）- 海洋</p>
                <div style="height:5px;"></div>
                <div style="float: left; width: 10%;">
                    <p style="width:20px;margin:0px auto;font-weight:bold;font-size:13px;">乙炔气体</p>
                </div>
                <div style="float:left;width:80%;">
                  
                    <div class="qrcode" data-id="<%=data[i].CARDID%>" style="text-align:center;"></div>
                  
                </div>
                <div style="float:left;width:10%;">
                    <p style="width: 20px; margin: 0px auto; font-weight: bold; font-size: 13px;">严禁烟火</p>
                </div>
                <div style="clear:both;"></div>
                <p style="font-size: 12px; margin-top: 5px;">联系电话：8577307     8577308     2018-4-4前有效</p>
                <div style="height:8px;"></div>
            </div>
            <div style="height:5px;"></div>
        </td>
        <td style="text-align:center;">
            <div style="height:5px;"></div>
            <div style="width:90%;text-align:center;border:solid 2px black; margin:0px auto;">
                <p style="font-weight:bold;font-size:14px;margin-top:8px;">胜利通海油服福通公司（制氧厂）</p>
                <p style="font-weight: bold; font-size: 15px; margin-top: 5px;">乙炔票（壹瓶）- 海洋</p>
                <div style="height:5px;"></div>
                <div style="float: left; width: 10%;">
                    <p style="width:20px;margin:0px auto;font-weight:bold;font-size:13px;">乙炔气体</p>
                </div>
                <div style="float:left;width:80%;">
                  
                    <div class="qrcode" data-id="<%=data[i+1].CARDID%>" style="text-align:center;"></div>
                   
                </div>
                <div style="float:left;width:10%;">
                    <p style="width: 20px; margin: 0px auto; font-weight: bold; font-size: 13px;">严禁烟火</p>
                </div>
                <div style="clear:both;"></div>
                <p style="font-size: 12px; margin-top: 5px;">联系电话：8577307     8577308     2018-4-4前有效</p>
                <div style="height:8px;"></div>
            </div>
            <div style="height:5px;"></div>
        </td>
    </tr>
    <% i++; }%>

</script>

++分页打印



 <%
 List list = (List) request.getAttribute("list");
 for (int i=0;i<list.size();i++) { 
 Map map1 = (Map)list.get(i);
 Map map2 = null;
 if(i+1<=list.size()-1)
 {
  map2 = (Map)list.get(i+1);
 }
 
 %>
 <% if((i+1)%10==1){ %>
  <table style="width:100%;page-break-before:always" id="main">
 <%} %>
    <tr>
        <td style="text-align:center;">
            <div style="height:5px;"></div>
            <div style="width:90%;text-align:center;border:solid 2px black; margin:0px auto;">
                <p style="font-weight:bold;font-size:14px;margin-top:8px;">胜利通海福通公司制氧厂</p>
                <p style="font-weight: bold; font-size: 15px; margin-top: 5px;"><%=map1.get("LX") %>(壹瓶)-<%=map1.get("KHMC")%>-<%=map1.get("BY1") %></p>
                <div style="height:5px;"></div>
                <div style="float: left; width: 10%;">
                    <p style="width:20px;margin:0px auto;font-weight:bold;font-size:13px;">
                    <%=map1.get("LX") %>
                    </p>
                </div>
                <div style="float:left;width:80%;">
                     <div class="qrcode" data-id="<%=map1.get("PKID")%>" style="text-align:center;"></div> 
                </div>
                <div style="float:left;width:10%;">
                    <p style="width: 20px; margin: 0px auto; font-weight: bold; font-size: 13px;">严禁烟火</p>
                </div>
                <div style="clear:both;"></div>
                <p style="font-size: 12px; margin-top: 5px;">联系电话：8577307     8577308     <%=map1.get("BY2")%>前有效</p>
                <div style="height:8px;"></div>
            </div>
            <div style="height:5px;"></div>
        </td>
        
        <td style="text-align:center;">
            <div style="height:5px;"></div>
            <% if(map2!=null){ %>
            <div style="width:90%;text-align:center;border:solid 2px black; margin:0px auto;">
                <p style="font-weight:bold;font-size:14px;margin-top:8px;">胜利通海福通公司制氧厂</p>
                <p style="font-weight: bold; font-size: 15px; margin-top: 5px;"><%=map2.get("LX") %>(壹瓶)-<%=map2.get("KHMC")%>-<%=map2.get("BY1") %></p>
                <div style="height:5px;"></div>
                <div style="float: left; width: 10%;">
                    <p style="width:20px;margin:0px auto;font-weight:bold;font-size:13px;">
                    <%=map2.get("LX") %>
                    </p>
                </div>
                <div style="float:left;width:80%;">
                    <div class="qrcode" data-id="<%=map2.get("PKID")%>" style="text-align:center;"></div> 
                   
                </div>
                <div style="float:left;width:10%;">
                    <p style="width: 20px; margin: 0px auto; font-weight: bold; font-size: 13px;">严禁烟火</p>
                </div>
                <div style="clear:both;"></div>
                <p style="font-size: 12px; margin-top: 5px;">联系电话：8577307     8577308     <%=map1.get("BY2")%>前有效</p>
                <div style="height:8px;"></div>
            </div>
            <%}else{ %>
            &nbsp;&nbsp;&nbsp;
            <%} %>
            <div style="height:5px;"></div>
        </td>
    </tr>
   <% i++;%> 
   <% if((i+1)%10==0 || i==list.size()){ %>
  </table>
  <%} %>
<% }%> 

Teln_小凯
关注
JS 生成及打印二维码
zhuye1992的专栏
10-30 9215
十、JS 生成及打印二维码 1. 字符串生成二维码 HTML代码 div class="qrcBody" id="qrcBody"> div> js代码 jQuery('#qrcBody').qrcode({ width: 250, height: 250, text: "good good stu
JS 实现打印二维码图片
weixin_40627398的博客
01-04 3281
ftl &lt;thead&gt; &lt;tr&gt; &lt;th data-options="field:'qdm',align:'center',halign:'center',width:'4'" formatter = fmtEwm&gt;签到码&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;!--查看--&am
JS打印二维码图片
09-06
使用JS页面打印图片，只需要修改制定的图片路径即可。路径可以使用参数定义获取
js生成二维码图片并打印
02-24
主体：根据数据生成二维码，并且打印此二维码 技术：js ,jquery ,jquery.jqprint-0.3.js来打印图片，jquery.qrcode.min.js生成二维码，另参杂多项前端小技术，例如：CANVAS转换图片，IMG添加id,js定时器，新窗口弹出....所有一应插件均已完善，不用多余下载和排除故障 本人新手，不喜勿喷！考虑好再下载！
基于qrcodejs2 + VXETable.print实现浏览器打印二维码功能
最新发布
ysccsyysc的博客
07-23 202
基于qrcodejs2 + VXETable.print实现浏览器打印二维码功能
js生成二维码并打印
02-22
附赠：js弹出遮罩DIV层DEMO 主体：根据数据生成二维码，并且打印此二维码 技术：js ,jquery ,jquery.jqprint-0.3.js来打印图片，jquery.qrcode.min.js生成二维码，另参杂多项前端小技术，例如：CANVAS转换图片，IMG添加id,js定时器，新窗口弹出....所有一应插件均已完善，不用多余下载和排除故障 本人新手，不喜勿喷！考虑好再下载！
二维码打印JS
yang6的专栏
01-17 1379
前段时间，有个项目，刚好需要用到二维码生成及打印的功能，所以上网找了相关的资料，网上有很多二维码生成工具及代码，在这里向大家推荐一款jquery.qrcode.js ,jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ，使用它可以很方便的在页面上生成二维条码。 只需要2行代码即可生成： jQuery('#output0').qrcode
js单打和批量打印，打印内容是二维码+文字
09-14
js单独打印二维码图片和批量打印二维码图片，大纲： 1. 打印机设置 （以使用的热敏打印机为例） 2. js实现打印功能 3. 遇坑记录
斑马打印机二维码打印斑马打印机二维码打印
10-18
斑马打印机，作为工业级条码和二维码打印的佼佼者，被广泛应用于物流、仓储、制造等行业。本文将深入探讨如何使用斑马打印机进行二维码的打印，以及相关的技术要点。 首先，我们要了解斑马打印机的基本操作。斑马...
java 实现二维码批量打印
03-26
在本文中，我们将深入探讨如何使用Java实现二维码批量打印，主要基于给定的标题"java 实现二维码批量打印"和描述中的技术环境。首先，我们要理解二维码（Quick Response Code）是一种二维条码，能存储大量数据，常...
js 生成二维码及打印
qq_38008721的博客
11-17 1693
1 引入js jquery.jqprint-0.3.js jquery.qrcode.min.js jquery-migrate-1.4.1.js 2 html元素 ：二维码生成在img的div中，新增img标签，并设置为display：none 3 生成二维码 $("#ewm").qrcode("http://127.0.0.1:8080/pages/check/infos.h...
jquery生成二维码打印
09-04
jquery生成二维码打印 略微修改可以直接使用，代码已上传
新版之后的js批量生成二维码！！！
01-29
新版之后的js批量生成二维码！！！之前的上传的还没有改善， 没将canvas转成img 的url (主要是快下班啦！不好意思)
TSC标签打印机中文和英文资料包含TSPL命令
06-05
TSC标签打印机中文和英文资料包含TSPL命令
佳博标签打印机 tspl指令集
12-25
普通打印机都是ESC指令集，但是像标签打印机这种是TSPL指令集，网上资源很少，所以上传共享给大家，同时自己赚点积分
打印Js生成的条形码和二维码（Lodop、C-Lodop组件）
02-13
打印Js生成的条形码和二维码（Lodop、C-Lodop组件） Web打印控件 报表打印工具 条码打印工具 图表打印工具
二维码，打印
softuse的博客
04-30 882
转自：https://www.cnblogs.com/swjian/p/9540682.html 最近做了一个项目，使用不干胶标签贴在RFID抗金属标签上，那么就会出现标签打印的问题，该如何打印呢？后来经过网上冲浪发现，其实打印标签和打印A4纸的方法一样，只不过就是布局、设置纸张大小的问题。 本文介绍打印机初步配置，以及实现方法。标签主要展示资产基本信息以及二维码。 首先设置打印机纸张大...
js调用打印机直接打印_打印机如何打印二维码
weixin_39872191的博客
11-14 787
如果想要打印二维码，需要下载一个二维码软件，在二维码软件中新建标签之后，点击软件左侧的二维码按钮，在画布上绘制二维码对象，双击二维码，在图形属性-基本中，根据自己的需求自定义设置标签尺寸。也可以选中二维码，通过拉伸二维码四周的边框，来调整二维码的大小。 二维码软件支持多种条码、二维码类型，可以根据自己的需求在条码中自定义设置二维码类型，如图所示： 然后在数据源中，点击“修改”按钮，删除默认的数据...
JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js
小熊猫
06-28 709
【代码】JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js。
JS实现单打与批量二维码打印：热敏打印机设置与js技巧
2. **JS实现打印功能**：文章的核心内容是利用JavaScript实现打印功能。虽然没有提供具体代码，但可以推测这部分涉及到了HTML5的`window.print()`方法，可能还需要借助一些库如html2canvas或jspdf等，将二维码和文字...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值