每天学习一点点 编程PDF电子书免费下载： http://www.shitanlife.com/code

介绍一下在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

生成条形码插件 条形码--JsBarcode的更多相关文章

  1. js自动生成条形码插件-JsBarcode

    JsBarcode.html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. js生成条形码插件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Java条形码插件

    项目中需要用条形码插件,基于Java平台的 需要比较简单,根据一个12位的数字生成一个条形码图片即可 之前一直用Google的Zxing,因为功能强大,调用简单,网上也有很多资料 后来发现,Zxing ...

  4. asp.net 生成、解析条形码和二维码

    原文 asp.net 生成.解析条形码和二维码 一.条形码 一维码,俗称条形码,广泛的用于电子工业等行业.比如我们常见的书籍背面就会有条形码,通过扫描枪等设备扫描就可以获得书籍的ISBN(Intern ...

  5. jquery 条形码 插件jquery-barcode使用

    转载文章   jquery 条形码 插件jquery-barcode使用 条码官网: http://barcode-coder.com/en/barcode-jquery-plugin-201.htm ...

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

    本文转载自http://www.uedsc.com/barcode-js.html Barcode.js是一个基于jQuery库的插件,用于绘制条形码或者二维码,能够生成基于DIV+CSS或者Canv ...

  7. 基于eclipse的mybatis映射代码自动生成的插件

    基于eclipse的mybatis映射代码自动生成的插件 分类: JAVA 数据库 工具相关2012-04-29 00:15 2157人阅读 评论(9) 收藏 举报 eclipsegeneratori ...

  8. 基于eclipse的mybatis映射代码自动生成的插件http://blog.csdn.net/fu9958/article/details/7521681

    基于eclipse的mybatis映射代码自动生成的插件 分类: JAVA 数据库 工具相关2012-04-29 00:15 2157人阅读 评论(9) 收藏 举报 eclipsegeneratori ...

  9. SpringBoot 添加mybatis generator 自动生成代码插件

    自动生成数据层代码,提高开发效率 1.pom添加插件,并指定配置文件路径 <!-- mybatis generator 自动生成代码插件 --> <plugin> <gr ...

随机推荐

  1. [SCOI2012] 喵星球上的点名

    Description 给定 \(N\) 个姓名串和 \(M\) 个点名串.询问每个点名串点到了多少姓名和每个姓名串被点到了几次.\(N\leq 5\cdot 10^4,M\leq 10^5\). S ...

  2. Linux终端命令全面介绍

    Linux终端命令 一.文件目录类 1.建立目录:mkdir 目录名2.删除空目录:rmdir 目录名3.无条件删除子目录: rm -rf 目录名4.改变当前目录:cd 目录名 (进入用户home目录 ...

  3. [PHP] 算法-统计一个数字在排序数组中出现的次数的PHP实现

    统计一个数字在排序数组中出现的次数. 1.有序的数组查找,使用二分法 2.二分法查找第一次出现的位置,二分法查找最后一次出现的位置,end - start +1 left=getLeft(data,k ...

  4. 2.C++中的bool类型,三目运算符,引用

    本章主要内容: 1)bool类型 2)三目运算符 3)引用 1.布尔型bool 在C++中,bool类型只有true(非0)和flase(0)两个值,且bool类型只占用了一个字节. 例如: #inc ...

  5. 解决vue-cli不能初始化webpack模板的问题(vue init卡住了，解决办法)

    报这个错误 有人说是代理问题.我也不懂,但这个方法有用 1.去github上下载要初始化的模板 https://github.com/vuejs-templates/webpack 或者直接用git去 ...

  6. js 动态绑定事件 on click 完美解决绑定不成功

    动态绑定坑了多少人..... //绑定   $("ol").on("click","li a",function(){ ...   }) / ...

  7. 【读书笔记】iOS-使用SQL数据库保存信息

    使用BLOB字段来保存图片是不是一个好的方法还存在争议,小图片除外.更常用的方法是将图片保存为一个文件,然后只在数据中保存图片文件的元数据,比如文件的路径.但是,如果你想把数据文件(初始数据)打包成一 ...

  8. filter(ele)过滤数组

    filter也是一个常用的操作,它用于把Array的某些元素过滤掉,然后返回剩下的元素. 例如,在一个Array中,删掉偶数,只保留奇数,可以这么写: function remove(arr) { l ...

  9. IOS7如何获取设备唯一标识

    WWDC 2013已经闭幕,IOS7 Beta随即发布,界面之难看无以言表...,简直就是山寨Android. 更让IOS程序猿悲催的是,设备唯一标识的MAC Address在IOS7中也失效了. I ...

  10. LeanCloud数据存储相关问题

    1.短信验证码 当注册用户的时候,会发现收不到短信验证码,打印e : That operation isn't allowed for clients. 含义 - 该操作无法从客户端发起.请检查该错误 ...