首页 > 其他 > 详细

前端生成条形码

时间:2020-12-21 18:14:28      阅读:72      评论:0      收藏:0      [点我收藏+]

实现效果:

技术分享图片

 

 

 代码如下:

<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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!