js版二维码打印

js版二维码打印

news/2024/7/10 23:47:35 标签: javascript, jquery, 前端

分页打印标识符号

前置打印的时候下一页

<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 = "";
        eprnstr = "";
        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>

<table style="width:100%;" id="main"></table>

<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{ %>
   
<%} %>
<div style="height:5px;"></div>
</td>
</tr>
<% i++;%>
<% if((i+1)%10==0 || i==list.size()){ %>
</table>
<%} %>
<% }%>

http://www.niftyadmin.cn/n/1529549.html

相关文章

WebRTC 学习之 Conference 实现混音混屏

WebRTC 学习之 Conference 实现混音混屏

混音混音的意义就是将多个音频流混成一路音频，在Conference 的实现中有分为终端实现和服务器实现。 1. 终端混音实现： 终端接受到多路（一般是多个用户）的音频流之后，在终端本地将多路音频流混成一路音频送给扬声器…

阅读更多...

JS 分页打印

JS 分页打印

在调用window.print()时，可以实现打印效果，但内容太多时要进行分页打印。在样式中有规定几个打印的样式 page-break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示，这两个属性是用来控制文件的打印方式。每个打印属性都…

阅读更多...

初识nodeJs

初识nodeJs

初识node.js node.js, 在我的理解中呢, 就是跑在服务器的js , 他是一个事件驱动I/O服务端javascript 环境, 基于Google的v8 引擎, v8引擎执行js的速度非常快, 性能非常好~ 所以呢, 前台代码搭配 node 去开发, 是非常舒服的~ 其次呢, 与java php这些语言比起来, node更加轻…

阅读更多...

倒计时活动效果

倒计时活动效果

html <p class"status-line" id"time-state"></p> 部分样式 status-line { width: 90%; background: rgba(255,255,255,.8); padding: .5rem 0; border-radius: .5rem; color: #6A7780; text-align: center;margin: 1rem au…

阅读更多...

（@WhiteTaken）设计模式学习——工厂方法模式

（@WhiteTaken）设计模式学习——工厂方法模式

这个工厂方法模式，是简单工厂的延伸，不同点在于，将某个具体的类继续细分，将核心部分抽象成一个接口。而简单工厂，把核心写在了一个类上，不利于拓展。举个例子，简单工厂中有苹果类，…

阅读更多...

Layim 聊天功能

Layim 聊天功能

效果图引用 <link rel"stylesheet" href"static/layim/dist/css/layui.css"> <script type"text/javascript src"static/layim/dist/layui.all.js"></script> <script type"text/javascript src"…

阅读更多...

WebApp H5 压缩上传图片

WebApp H5 压缩上传图片

效果图这里主要说的事身份证的压缩上传 3MB的照片，前端压缩之后为100kb左右。主要功能：等比例压缩参考文献：https://blog.csdn.net/qq_35393869/article/details/80924812 https://blog.csdn.net/hu1991die/article/details/40585581 …

阅读更多...

html是什么，html5是什么？web开发必备知识之html

html是什么，html5是什么？web开发必备知识之html

如果你要写一篇文章，你可以能会这样写：“我是小明，今年6岁了，现在在上小学一年级。我喜欢吃鲍鱼。” 当时如果你像让“鲍鱼”这两个字红色并且字体大一点怎么办？？ 至少要让电脑明白那些字体要变颜色那些字…

阅读更多...

最新文章