js批量生成条形码制作前端标签打印工具

Excel效率人

已于 2022-06-06 00:26:49 修改

阅读量2.2k

点赞数 1

分类专栏： javascript文章文章标签：前端 css html javascript jquery

于 2022-06-06 00:19:47 首次发布

本文链接：https://blog.csdn.net/huaermeier/article/details/125138534

版权

javascript文章专栏收录该内容

2 篇文章 1 订阅

订阅专栏

最近接到一个需要批量生成条形码并且要做成标签用打印机打印出来的问题，提了一大堆要求，后面估计还要改很多次。左思右想了下，决定做成html文件放在局域网里共享，后面要改的话也方便。

要求如下：

将文本框的内容转换成表格，验证sku只能是字母数字的组合且不小于4个字符
每个单元格都可以修改，可以批量或选中删除行
根据sku生成code128条形码并做成小标签，可以用7*4厘米的热敏纸打印出来

好在不需要兼容浏览器，随便搞搞也行。先看效果：

一、Lable.html 页面，需要 jquery-2.1.4.min.js 和 JsBarcode.all.min.js 下载好引入页面即可。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BarCode</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #xiaoxi {
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .tools {
            margin-left: 30px;
            margin-bottom: 30px;
        }
        .tools,.xiaoxi {
            margin-top: 30px;
        }
        #music {
            float: right;
            margin-right: 40%;
        }
        .th1,.th2,.th4,.th5,.th6 {
            width: 80px;
            height: 28px;
        }
        .th3 {
            width: 120px;
            height: 28px;
        }
        tbody input {
            width: 90%;
            height: 100%;
            border: 0px;
        }
        table {
            margin-top: 12px;
            border-collapse: collapse;
        }
        tbody {
            border-right: 1px solid black;
            border-bottom: 1px solid black;
        }
        tbody div {
            border-left: 1px solid black;
            border-top: 1px solid black;
        }
        button {
            cursor: pointer;
            width: 70px;
            height: 30px;
            margin-left: 18px;
        }
        .lable {
            width: 280px;
            height: 168px;
            border: 1px solid black;
            margin: 2px;
            text-align: center;
            padding-top: 10px;
        }
        .barcode {
            margin: 0 auto;
        }
        .k_left {
            text-align: left;
            margin-top: 5px;
        }
        span {
            margin-left: 2px;
            font-size: 16px;
        }
        .k_canku {
            font-size: 17px;
            margin-left: 14px;
        }
        .k_left2 {
            font-size: 20px;
            margin-top: 13px;
        }
        .checkbox {
            width: 15px;
            height: 15px;
            margin-top: 7px;
        }
        @page {
            size: auto;
            margin: 0mm;
        }
    </style>
</head>

<body>
    <div class="tools">
        <div class="canku">
            <label for="canku">仓库：</label>
            <input type="text" value="东坑" id="canku">
        </div>

        <div class="xiaoxi">
            <label for="xiaoxi">消息：</label>
            <textarea id="xiaoxi" rows="4" cols="50"></textarea>
            <button id="chuli">处理</button>
            <button id="dayin">打印</button>
        </div>

        <div>
            <table>
                <thead>
                    <tr>
                        <th><div class="th1" style="width: 28px;"><input type="checkbox" id="f_checkbox" class="checkbox" style="margin-left: 3px;"></div></th>
                        <th><div class="th1">sku</div></th>
                        <th><div class="th2">申请人</div></th>
                        <th><div class="th3">收样人</div></th>
                        <th><div class="th4">地址</div></th>
                        <th><div class="th5">楼层</div></th>
                        <th><div class="th6">储位</div></th>
                        <th><div class="th1">操作</div></th>
                    </tr>
                </thead>

                <tbody id="mydata"></tbody>
            </table>
            <div><span id="xiang"></span><span id="xiang_ed"></span></div>
        </div>
    </div>
    <!-- 打印模块 -->
    <div id="print" style="display: none"></div>
    <script src="jquery-2.1.4.min.js"></script>
    <script src="JsBarcode.all.min.js"></script>
    <script src="lable.js"></script>
</body>

</html>

二、lable.js 主要代码：

$(document).ready(function () {
    //处理按钮事件
    $('#chuli').click(function () {
        $('#mydata').html('');
        $('#xiang_ed').html('');
        $('#f_checkbox').attr('checked', false);

        //获取消息文本框的文本内容
        let xiaoxi = $('#xiaoxi').val();
        let fenge = xiaoxi.split('\n');
        let i = 0;
        let fenge_len = fenge.length;

        //将数组循环写入表格
        for (i; i < fenge_len; i++) {
            fenge[i] = fenge[i].split(',');

            //验证字母数字组合且不少于4个字符正则
            if (/^[A-Za-z0-9]{4,}$/.test(fenge[i][0]) === false) { continue; }

            //将数据写入表格
            $('#mydata').append(
                '<tr><td><div class="th1" style="width: 28px;"><input type="checkbox" class="checkbox"></div></td>' +
                '<td><div class="th1"><input type="text" value="' + fenge[i][0] + '"></div></td>' +
                '<td><div class="th2"><input type="text" value="' + fenge[i][1] + '"></div></td>' +
                '<td><div class="th3"><input type="text" value="' + fenge[i][2] + '"></div></td>' +
                '<td><div class="th4"><input type="text" value="' + fenge[i][3] + '"></div></td>' +
                '<td><div class="th5"><input type="text" value="' + fenge[i][4] + '"></div></td>' +
                '<td><div class="th6"><input type="text" value="' + fenge[i][5] + '"></div></td>' +
                '<td><div class="th1"><a href="javascript:;">删除</a></div></td></tr>'
            );
        }

        $('#xiang').text(' 共 ' + $('#mydata tr').length + ' 项');

        //全选或全不选
        $('#f_checkbox').on('click', function () {
            $('tbody input:checkbox').prop('checked', $(this).prop('checked'));

            if ($('#f_checkbox').prop('checked')) {
                $('#xiang_ed').text('； 已选择 ' + $('#mydata tr').length + ' 项');
            } else { $('#xiang_ed').text(''); }

        })

        //tbody_input点击事件
        $('tbody input:checkbox').on('click', function () {
            if ($('tbody input:checkbox').length === $('tbody input:checked').length) {
                $('#f_checkbox').prop('checked', true);
            } else {
                $('#f_checkbox').prop('checked', false);
            }

            $('#xiang_ed').text('； 已选择 ' + $('tbody input:checked').length + ' 项');
        })

        //删除操作事件
        $('tbody a').on('click', function () {
            if ($('tbody input:checked').length > 0) {

                $('tbody input:checked').each(function () {
                    $(this).parent().parent().parent().remove();
                })

                $('#f_checkbox').attr('checked', false);
                $('#xiang').text(' 共 ' + $('#mydata tr').length + ' 项');
                $('#xiang_ed').html('');

            } else { alert('未选择!') }
        })

        $('#mydata').css('text-align', 'center');

    })

    //打印按钮事件
    $('#dayin').click(function () {
        $('#print').html('');
        var data = [];

        //读取表格内容
        $('#mydata tr').each(function (index) {
            data[index] = [];
            $(this).find('input').each(function () {
                data[index].push($(this).val());
            })
        })

        let canku = $('#canku').val();
        let i = 0;
        let data_len = data.length;

        //循环生成小标签
        for (i; i < data_len; i++) {
            $('#print').append(
                '<div class="lable">' +
                '<svg class="barcode"></svg>' +
                '<div class="k_left"><span class="k_canku">' + canku + '<span><span>' + getNowDate() + '<span><span>' + data[i][5] + '<span><span>' + data[i][6] + '<span></div>' +
                '<div class="k_left2">' + data[i][2] + ',' + data[i][3] + ',' + data[i][4] + '</div>' +
                '</div>'
            );

            //JsBarcode生成条形码
            $('.barcode:last').JsBarcode(data[i][1], {
                height: 40,
                textMargin: 0,
                fontSize: 30,
                fontOptions: 'bold',
                margin: 5
            })

        }

        //设置打印分页
        $('#print .lable').css('page-break-before', 'always');
        $('#print .lable:first').attr('style', '');

        //打印窗口
        var newWindow = window.open("打印窗口", "_blank");
        var docStr = '<style>' + document.getElementsByTagName("style")[0].innerHTML + '</style><div id="print">' + document.getElementById('print').innerHTML + '</div>';
        newWindow.document.write(docStr);
        newWindow.document.close();
        newWindow.print();
        newWindow.close();
    })
})

//当前系统时间: yyyy-mm-dd hh:mm:ss
function getNowDate() {
    var date = new Date();
    var sign1 = '-';
    var sign2 = ':';
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    var hour = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();
    var weekArr = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
    var week = weekArr[date.getDay()];
    // 前面加0;
    if (month >= 1 && month <= 9) {
        month = '0' + month;
    }
    if (day >= 0 && day <= 9) {
        day = '0' + day;
    }
    if (hour >= 0 && hour <= 9) {
        hour = '0' + hour;
    }
    if (minutes >= 0 && minutes <= 9) {
        minutes = '0' + minutes;
    }
    if (seconds >= 0 && seconds <= 9) {
        seconds = '0' + seconds;
    }
    var currentdate = year + sign1 + month + sign1 + day;
    return currentdate;
}

Excel效率人

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
2
评论
js批量生成条形码制作前端标签打印工具

最近接到一个需要批量生成条形码并且要做成标签用打印机打印出来的问题，提了一大堆要求，后面估计还要改很多次。左思右想了下，决定做成html文件放在局域网里共享，后面要改的话也方便。要求如下：1.将文本框的内容转换成表格，验证sku只能是字母数字的组合且不小于4个字符;2.每个单元格都可以修改，可以批量或选中删除行;根据sku生成code128条形码并做成小标签，可以用7*4厘米的热敏纸打印出来。好在不需要兼容浏览器，随便搞搞也行。......
复制链接

扫一扫