JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】


Posted in Javascript onApril 19, 2017

本文实例讲述了JS条形码插件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 bwju!");
 </script>
 </body>
</html>

JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】

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

<img />
<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>

JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】

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

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Node.js中调用mysql存储过程示例
Dec 20 Javascript
javascript中createElement的两种创建方式
May 14 Javascript
JS实现适合于后台使用的动画折叠菜单效果
Sep 21 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
详解堆的javascript实现方法
Nov 29 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 Javascript
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
Vue常用的几个指令附完整案例
Nov 06 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
Jul 29 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
Nov 03 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
Dec 09 Javascript
微信小程序页面传值实例分析
Apr 19 #Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
Apr 19 #Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
Apr 19 #Javascript
angular-cli修改端口号【angular2】
Apr 19 #Javascript
Angular2自定义分页组件
Apr 19 #Javascript
详解vue表单验证组件 v-verify-plugin
Apr 19 #Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 #Javascript
You might like
PHP版网站缓存加快打开速度的方法分享
2012/06/03 PHP
Zend Framework教程之Autoloading用法详解
2016/03/08 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
JQuery里选择超链接的实现代码
2011/05/22 Javascript
关于js datetime的那点事
2011/11/15 Javascript
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
D3.js实现雷达图的方法详解
2016/09/22 Javascript
AngularJS自定义控件实例详解
2016/12/13 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
Python基于whois模块简单识别网站域名及所有者的方法
2018/04/23 Python
在python中使用pyspark读写Hive数据操作
2020/06/06 Python
python,Java,JavaScript实现indexOf
2020/09/09 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
美国马匹用品和骑马配件购物网站:Horse.com
2018/01/08 全球购物
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
static关键字的用法
2013/10/07 面试题
个人求职信范例
2014/01/29 职场文书
幼师自我鉴定
2014/02/01 职场文书
运动会入场词200字
2014/02/15 职场文书
服装促销活动方案
2014/02/23 职场文书
继承公证书样本
2014/04/04 职场文书
社团活动总结报告
2014/06/27 职场文书
公司领导班子对照材料
2014/08/18 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
清明节寄语2015
2015/03/23 职场文书
React forwardRef的使用方法及注意点
2021/06/13 Javascript