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

借助JsBarcode生成条形码

官网:https://lindell.me/JsBarcode/

github: https://github.com/lindell/JsBarcode

html 复制代码
<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() 打印页面上局部的数据

html 复制代码
<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>
相关推荐
清风细雨_林木木7 分钟前
Vue加载资源‘如图片’的“直接引入“方式和“request()“的区别
前端·javascript·vue.js
大熊猫侯佩9 分钟前
iOS 26 仅需几行代码让 SwiftUI 7 液态玻璃界面焕发新春
前端·swiftui·apple
BillKu1 小时前
Vue3应用执行流程详解
前端·javascript·vue.js
欧阳天风1 小时前
链表运用到响应式中
javascript·数据结构·链表
Codebee1 小时前
OneCode 移动套件多平台适配详细报告
前端·人工智能
你知唔知咩系timing啊1 小时前
🎙️ 站在巨人肩膀上:基于 SenseVoice.cpp 的前端语音识别实践
前端
一位搞嵌入式的 genius1 小时前
前端开发核心技术与工具全解析:从构建工具到实时通信
前端·笔记
littleplayer1 小时前
Redux 中›ABC三个页面是如何通信的?
前端
安卓开发者1 小时前
鸿蒙NEXT的Web组件网络安全与隐私保护实践
前端·web安全·harmonyos