条形码控件使用(jquery-barcode)

最新推荐文章于 2025-02-27 11:19:46 发布

你若不在-我便走

最新推荐文章于 2025-02-27 11:19:46 发布

阅读量5.1k

点赞数

分类专栏： Jquery

本文链接：https://blog.youkuaiyun.com/qq_36409820/article/details/76187351

版权

Jquery 专栏收录该内容

3 篇文章

订阅专栏

这篇博客介绍了如何利用jQuery Barcode插件在网页中生成条形码，提供了实例参考和关键参数设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用的小案例

<script src="./jquery-2.0.3.min.js"></script>
<script src="./jquery-barcode.js"></script>//必须引用的js
<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
     }
     */