jquery 條形碼插件jquery-barcode使用

時間 2019-11-11

原文原文鏈接

條碼官網：css

http://barcode-coder.com/en/barcode-jquery-plugin-201.htmlhtml

條碼中第一個參數是條碼內容jquery

條形碼中的第二個參數：canvas

ean8 ean13 std25 int25 code11 code39 code93 code128（通常商品掃描使用） codabar msi datamatrix

<script src="./jquery-2.0.3.min.js"></script>
<script src="./jquery-barcode-last.min.js"></script>
<script>
    $(function(){
        $("#bcTarget").barcode("5693691811000083", "code128",{
          output:'css',       //渲染方式 css/bmp/svg/canvas
          //bgColor: '#ff0000', //條碼背景顏色
          color: '#00ff00',   //條碼顏色
          barWidth: 2,        //單條條碼寬度
          barHeight: 100,     //單體條碼高度
          // moduleSize: 5,   //條碼大小
          // posX: 10,        //條碼座標X
          // posY: 5,         //條碼座標Y
          addQuietZone: false  //是否添加空白區（內邊距）
        });
    })
</script>
<style type="text/css">
    /*#bcTarget{width: 400px;height: 100px;}*/
</style>
</head>
<body>
    <div id="bcTarget"></div>
</body>

//應用時可能用到參數選項  
  var barcodeSettings = {
        addQuietZone: false,      //是否添加空白區（內邊距）
        bgColor: "#FFFFFF",  //條碼背景顏色
        color: "#000000",    //條碼顏色
        fontSize: 12,   //條碼字體大小
        marginHRI: 5,  //條碼字體距條碼中心的高度
        barWidth: "1",  //單條條碼寬度
        barHeight: "60"  //單體條碼高度
    };
//jquery-barcode插件中的參數選項  
    /*
     defaultsettings: {
     barWidth: 1,
     barHeight: 50,
     moduleSize: 5,
     showHRI: true,
     addQuietZone: true,
     marginHRI: 5,
     bgColor: "#FFFFFF",
     color: "#000000",
     fontSize: 10,
     output: "css",  //渲染方式 css/bmp/svg/canvas
     posX: 0,
     posY: 0
     }
     */