zoukankan      html  css  js  c++  java
  • Barcode.js功能强大的条码生成jQuery插件

    本文转载自http://www.uedsc.com/barcode-js.html

    Barcode.js是一个基于jQuery库的插件,用于绘制条形码或者二维码,能够生成基于DIV+CSS或者Canvas等的条码,该插件支持PHP,jQuery和JavaScript,解压后对应3个目录,每个目录下都有对应的例子可以查看。

    Barcode.js功能强大的条码生成jQuery插件

    注意:需要绘制的条形码/二维码长度和字符串包含字母之类的,注意要选择不同的条形码/二维码类型,要不无法绘制(没研究过条形码,经测试视乎是这样的)。建议直接选择code128。

    使用方法

    1、同其他jQuery插件一样,只需要将jQuery框架和jquery.barcode.js文件引入页面。

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.barcode.js"></script>

    2、定义一个DOM对象作为生成条形码/二维码的容器

    <div id="bcTarget"></div>

    3、使用jQuery选择器调用barcode()方法绘制条形码/二维码

    $("#bcTarget").barcode("1234567890128", "ean13");

    根据输入字符的长度来生成对应的条形码

    function genCode(){
        var encode = "ean8";
        if(8 === $("#exam_no").text().length) encode = "ean8";
        else if(11 === $("#exam_no").text().length) encode = "code11";
        else if(13 === $("#exam_no").text().length) encode = "ean13";
        $("#code_b").barcode($("#exam_no").text(), encode, {barWidth: 2, barHeight: 50});
        $("#code_s").barcode($("#exam_no").text(), encode, {barWidth: 1, barHeight: 50});
        $("#code_b div").css('background-color', '#eee');
    }

    参数说明

    jquery对象扩展方法barcode参数说明:barcode: function(datas, type, settings)

    datas参数支持2种类型

    • string:要绘制的条形码字符串内容(依赖于条形码的类型)。如果条形码类型能容纳这些字符,并且存在校 验不是强制性的,字符串的ISE将会自动计算(原文:If barcode type include it, the presence of the checksum is not mandatory, it ise automatically recalculated)
    • object
      type : ean8, ean13, code11, code39, code128, codabar
      memberType
      code string
      type : std25, int25, code93
      memberType
      code string
      crc boolean
      type : msi
      memberType
      code string
      crc boolean
      object crc1 : string(“mod10”, “mod11”)
      crc2 : string(“mod10”, “mod11”)
      type : datamatrix
      memberType
      code string
      rect boolean (default : false)

    type (string):条形码类型

    注意要根据字符串长度来选择条形码的编码方式,生成的条形码默认是DIV+CSS形式的,后面的barWidthbarHeight是生成参数,默认是70X70的正方形,后面的参数可以调整条形码的比例,但不能调整大小

    • codabar
    • code11 (code 11)
    • code39 (code 39)
    • code93 (code 93)
    • code128 (code 128)
    • ean8 (ean 8)
    • ean13 (ean 13)
    • std25 (standard 2 of 5 – industrial 2 of 5)
    • int25 (interleaved 2 of 5)
    • msi
    • datamatrix (ASCII + extended)

    settings (object):条形码样式的配置

    配置名称类型默认值描述限制
    barWidth int 1 条形码宽度 1D
    barHeight int 50 容器高度 1D
    moduleSize int 5 largeur / hauteur d’un module 2D
    showHRI bool true 是否显示条形码内容(方便识别)  
    bgColor text #FFFFFF 背景色  
    color text #000000 条形码颜色  
    fontSize int 10 显示的条形码内容字体大小  
    output text css 如何绘制条形码: css, svg, bmp, canvas,注意svg,bmp,canvas不支持IE,最好不用  
    renderer : canvas
    ParameterTypeDefault valueDetail
    posX int 0 X origine
    posY int 0 Y origine

    相关链接

  • 相关阅读:
    CSS命名规范
    mysql对GIS空间数据的支持,包括创建空间索引
    jQuery和DOM对象
    教你轻松快速学会用Calibre TXT转MOBI
    教你如何写出一手漂亮的英文 ( 附视频教程 )
    推荐几个知名顶级的文献网站
    最常犯的12个逻辑错误
    信息学竞赛书籍
    适合入门的英语原版书
    2017十大流行编程挑战网站
  • 原文地址:https://www.cnblogs.com/abc8023/p/7782181.html
Copyright © 2011-2022 走看看