前端页面生成条形码，借助layui打印标签

蓝色的simon

于 2024-02-23 16:08:18 发布

阅读量1.4k

点赞数 21

文章标签：前端 layui javascript

本文链接：https://blog.csdn.net/qq_45135600/article/details/136258400

版权

借助JsBarcode生成条形码
官网：https://lindell.me/JsBarcode/
github: https://github.com/lindell/JsBarcode

<div class="table-div" style="display: block;width: 300px; height: 241px; margin: auto;">
    <table border="1" cellspacing="0" cellpadding="3" style=" width: 300px; height: 230px;">
        <tr>
            <td colspan="2" height="80px">
                <div style="text-align: center">
                    <img id="barcode"/>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2" height="25px">
                <span style="float: left;position: relative;left:3px;font-size: 16px">开发员：${logistics_id}</span>
            </td>
        </tr>
        <tr>
            <td colspan="2" height="25px">
                <span style="float: left;position: relative;left:3px;font-size: 16px">SQE工程师：${logistics_id}</span>
            </td>
        </tr>
        <tr>
            <td colspan="2" height="25px">
                <span style="float: left;position: relative;left:3px;font-size: 16px"> 取样类型：${logistics_id} </span>
            </td>
        </tr>
        <tr>
            <td colspan="2" height="25px">
                <span style="float: left;position: relative;left:3px;font-size: 16px"> 收货地址：${work_address} </span>
            </td>
        </tr>
        <tr>
            <td colspan="2" height="25px">
                <span style="float: left;position: relative;left:3px;font-size: 16px">建资料流水号：${logistics_id}</span>
            </td>
        </tr>
    </table>
</div>
<script src="https://unpkg.com/jsbarcode@latest/dist/JsBarcode.all.min.js"></script>
<script>
    JsBarcode("#barcode", "212313");
    let test = document.getElementById('barcode').getAttribute('src')
    console.log(test)
</script>

打印代码,使用 window.print() 打印页面上局部的数据

<script>
function print_labels(developer, sqe_person, sampling_type_display, work_address, pid) {
            layui.use(['form', 'layer', 'laydate', 'table', 'laytpl', 'element'], function () {
                var form = layui.form,
                    layer = layui.layer,
                    $ = layui.jquery,
                    laydate = layui.laydate,
                    laytpl = layui.laytpl,
                    element = layui.element,
                    table = layui.table,
                    formSelects = layui.formSelects;
                let logistics_id = $('input[name="logistics_id"]').val()
                if(!logistics_id){
                    layer.msg("请先填写物流单号！");
                }else{
                    JsBarcode("#barcode", logistics_id);
                    let barcode_res = $('#barcode').attr('src')
                    console.log(barcode_res)
                    var headstr = "<html><head></head><body>";
                    var footstr = "</body>";
                    //获得 print_div   里的所有 html 数据(把要打印的数据嵌套在 一个 div 里，获得 div)
                    //var printData = document.getElementById("print").innerHTML;
                    var printData = `
                    <div class="table-div" style="display: block;width: 300px; height: 241px; margin: auto;">
                        <table border="1" cellspacing="0" cellpadding="3" style=" width: 300px; height: 230px;">
                            <tr>
                                <td colspan="2" height="80px">
                                    <div style="text-align: center">
                                        <img id="barcode" src="${barcode_res}"/>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" height="25px">
                                    <span style="float: left;position: relative;left:3px;font-size: 16px">开发员：${developer}</span>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" height="25px">
                                    <span style="float: left;position: relative;left:3px;font-size: 16px">SQE工程师：${sqe_person}</span>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" height="25px">
                                    <span style="float: left;position: relative;left:3px;font-size: 16px"> 取样类型：${sampling_type_display} </span>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" height="25px">
                                    <span style="float: left;position: relative;left:3px;font-size: 16px"> 收货地址：${work_address} </span>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" height="25px">
                                    <span style="float: left;position: relative;left:3px;font-size: 16px">建资料流水号：${pid}</span>
                                </td>
                            </tr>
                        </table>
                    </div>
                    `
                    //获取当前页面的html
                    var oldstr = document.body.innerHTML;
                    //把 headstr+printData+footstr 里的数据 复制给 body 的 html 数据 ，相当于重置了 整个页面的 内容
                    document.body.innerHTML = headstr + printData + footstr;
                    //使用方法为 window.print() 打印页面上局部的数据
                    window.print();
                    document.body.innerHTML = oldstr;
                    setTimeout("parent.layer.closeAll(\"iframe\")", 1000);
                    // parent.layer.closeAll("iframe");

                }

            });
        }
</script>