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

最近接到一个需要批量生成条形码并且要做成标签用打印机打印出来的问题，提了一大堆要求，后面估计还要改很多次。左思右想了下，决定做成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;
}

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

前端js html转换成pdf可下载打印；前端js可批量生成条形码；前端js可批量生成二维码，生成letter标签
注意:本文调试的是letter纸尺寸前端js html转换成pdf可下载打印 html2canvas + jspdf 前端js生成条形码 Options · lindell/JsBarcode ...
如何用TXT文档数据批量生成条形码
我们在制作商品标签的时候,经常需要根据已有的条码数据来批量生成条形码.这些条码数据一般存储在TXT文档.excel表或者是其他类型数据库中,具体怎么操作呢?我们就以TXT文档做实例,和大家分享一下如何 ...
datatable如何生成级联数据_如何把Excel表数据批量生成条形码
条形码属于一维条码,是将宽度不等的多个黑条和空白,按照一定的编码规则排列,用以表达一组信息的图形标识符,条形码的种类比较多,比如常用的Code128码,Code39码,Code93码,EAN-13码, ...
使用html2canvas实现批量生成条形码
/*前台代码*/ 1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Gener ...
EXCEL 批量生成条形码、二维码方案
一. 通过条码字体生产条形码 1.网上下载C39HrP24DhTt 条码字体,导入win10 fonts文件夹,excel 中引用C39HrP24DhTt 字体进行显示. (68条消息) Excel ...
5 video关掉字幕选项_Photoshop 2020中英文字幕批量生成的制作方法
下面说下Photoshop 2020中英文字幕批量生成的制作方法 1.先在excel里把中文字幕设置为一列,英文设置为一列,首列标题分别设置为A和B为标题,接着复制粘贴到txt文档里进行保存: 2 ...
python条形码库_python批量生成条形码的示例
在工作中,有时会遇见需要将数字转换为条码的问题,每次都需要打开条码转换的网站,一次次的转换后截图,一两个还行,但是当需要转换的数量较多时,就会显得特别麻烦,弄不好还会遗漏或者重复,为了解决这个问题,使 ...
C#实现批量生成条形码 ——主要用于准考证号的条形码生成
功能介绍 1. 批量生成条形码 2. 自由设置图片大小.条形码线高和间距 3. 自由设置标题文本字号大小 4. 自由设置增量(相邻条形码的差量)数制(比如:每考场只生成30名) 源代码 usi ...
使用Python在Excel中批量生成条形码
2019独角兽企业重金招聘Python工程师标准>>> 最近在研究盘点机盘点的问题,其中有一部分的商品没有的条形码,就想着自个生成条形码.参考了网上的教程,关于Excel批量生成条形 ...
【前端】JS批量生成调查问卷选项
WARNING! 这篇博客基于我近期的一个 Java Web 作业,仅供参考,谢绝 Ctrl + C + V. 目录要求实现思路网页结构实现代码 JS 端网页端 index.jsp resu ...

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

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

最新文章

热门文章