条形码--JsBarcode(银联二维码用过)

介绍一下在GitHub生成条形码的js插件→JsBarcode

条码支持的有:

CODE128
  CODE128 (自动模式切换)
  CODE128 A/B/C (强制模式)
EAN
  EAN-13
  EAN-8
  EAN-5
  EAN-2
  UPC (A)
CODE39
ITF-14
MSI
  MSI10
  MSI11
  MSI1010
  MSI1110
Pharmacode
Codabar

 

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" /> 
  <title></title> 
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 
  <script type="text/javascript" src="js/JsBarcode.all.js"></script> 
 </head> 
 <body> 
  <svg id="svgcode"></svg> 
  <!-- or --> 
  <canvas id="canvascode"></canvas> 
  <!-- or --> 
  <img id="imgcode" /> 
  <script>  
        $("#svgcode").JsBarcode('Hi!');//or JsBarcode("#svgcode", "Hi!");  

        $("#canvascode").JsBarcode('Hello world!');//or JsBarcode("#canvascode", "Hello world!");  
  
        $("#imgcode").JsBarcode("I'm huangenai!");//or JsBarcode("#imgcode", "I'm huangenai!");    </script>  </body></html>

 

JsBarcode 我们还可以设置条码的一些属性(可设置属性详细介绍 链接:https://github.com/lindell/JsBarcode/wiki/Options)

 

<img id="imgcode" />        
  <script>  

JsBarcode("#imgcode", "123", {
  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//设置条形码周围的空白边距
});
  
  </script>

 

GitHub:https://github.com/lindell/JsBarcode

条码生成器:http://lindell.me/JsBarcode/generator/

JsBarcode示例与设置:http://codepen.io/lindell/pen/mPvLXx?editors=1010

简单的JsBarcode演示:http://codepen.io/lindell/pen/eZKBdO?editors=1010

 

转载于:https://www.cnblogs.com/ourLifes/p/8310692.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
英文版的工具名是“Barcode Toolbox”,然后点击“Hide Barcode”。如下图: 之后在工作区会出现如下图的“Barcode Toolbox”工具面板: 通过条形码测量工具可对已创建的条形码进行校验,其校验功能也可以校验由其它条形码工具所生成的条形码。在工具箱上选择条形码测量工具,横向划过已生成的条形码,在条形码调板的代码字段内即可产生该条形码的构成数值。测量前一定要确保条码是群组后的,测量时测量工具一定要把条码拉完。 在条码工具面板右方还有一个下拉菜单: 下拉菜单内容如下: 下拉菜单的具体含意是: -添加结束区域指示符 -添加上下端鉴别条 -添加左右端鉴别条 -使用OCRB作为缺省字体未完待续 -判读字符居中对齐 -判读字符的高度缩放百分比 PS:一般情况下这些选项保持默认便可,无需更改。 条码制作过程:以 EAN 13 为例 在code栏里输入正确的13位条码号(最后的校验位可不必输入,会自动生成,若你发现自动生成的未位与资料来符,请及时核对你的资料的正确性),输入时你可以不用分隔符隔开,输入完后会自动隔开的。 在code witdth里输入合适的条宽缩小量。条宽缩小量因不同的印刷而有所不同。胶印一般为0.02。凹印一般为0.03。柔印可以为0.05.还有一点要注意:这里的设置要在条码放缩前进行。数值越大出来的条码线条越宽。 在Magnification里输入你想设置的条码放缩的比率。由于印刷的精度,规定条码的放缩比为0.8-2.0之间。最好在0.9-1.2之间。数值越大出来的条码整体越宽。 在bar heigh里输入你想要的条码高度。标准规定EAN-13条码的高度为25mm。所以一般都输入25。你可以将条码截断。一般通过蒙板实现。若要变短,最好小于原条码的1/4,最大不可大于原条码的1/3。数值越大出来的条码整体越高。 参数设置好后点击AI工具栏的条码画笔工具(如下图)在工作区点击便会出现条码。 自我经验:条码数字正常应该是 OCR-B 10 PITCH BT 字体,如若不是请打散条码群组后更改。至于条码图形的高低宽窄可自由等比例调整以适合你的设计要求。最后一定试打一张条码,用条码扫描仪扫描测试成不成功(打开WORD软件,扫描仪对准条码扫出的数字核对一下资料便可
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值