实现效果:
代码如下:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.0/JsBarcode.all.min.js"></script> <script> var parent; function doTests(p){ parent = p; var data=[ { id:"X001WAU01R111", text:"Natrogix Nirvana Essential... Mado in USA w/Free E-Book New" }, { id:"X001WAU01R111", text:"Natrogix Nirvana Essential... Mado in USA w/Free E-Book New" }, { id:"X001WAU01R111", text:"Natrogix Nirvana Essential... Mado in USA w/Free E-Book New" }, { id:"X001WAU01R111", text:"Natrogix Nirvana Essential... Mado in USA w/Free E-Book New" }] createTests(newTest,data); } function newTest(text, options){ var testbox = document.createElement("div"); testbox.className = "testbox"; var format = (typeof options !== "undefined" && options.aaa) || "auto"; testbox.innerHTML = ‘<img class="barcode"/>‘
+ ‘<p class="span">‘ + format + ‘<p/>‘ ; try{ $(‘.barcode‘, testbox).JsBarcode(text, options); } catch(e){ testbox.className = "errorbox"; testbox.onclick = function(){ throw e; } } parent.appendChild(testbox); } function createTests(newTest,data){ for(var i=0;i<data.length;i++){ newTest(data[i].id, { aaa: data[i].text, width: 1.3, height: 20, displayValue: true, font: "cursive", textAlign: "center", fontSize: 14, }); } } </script>
<div id="content"> //一定要放在js下面 <script> doTests(document.getElementById(‘content‘)); </script> </div>
配置信息:
format: "CODE39", //选择要使用的条形码类型 width:3, //设置条之间的宽度 height:100, //高度 displayValue:true, //是否在条形码下方显示文字 text:"456", //覆盖显示的文本 fontOptions:"bold italic", //使文字加粗体或变斜体 font:"fantasy", //设置文本的字体 textAlign:"left", //设置文本的水平对齐方式 textPosition:"top", //设置文本的垂直位置 textMargin:5, //设置条形码和文本之间的间距 fontSize:15, //设置文本的大小 background:"#eee", //设置条形码的背景 lineColor:"#2196f3", //设置条和文本的颜色。 margin:15, //设置条形码周围的空白边距
原文:https://www.cnblogs.com/nanadang/p/14168935.html