实现效果:

代码如下:
<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