前端生成条形码

实现效果：

 

 

 代码如下：

<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,  //设置条形码周围的空白边距