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 相关文章推荐
javascript 解析url的search方法
Feb 09 Javascript
jQuery动画animate方法使用介绍
May 06 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
Mar 06 Javascript
javascript数组去重方法终极总结
Jun 05 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
JavaScript中对象property的读取和写入方法介绍
Dec 30 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
基于Vuejs和Element的注册插件的编写方法
Jul 03 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
Javascript 模拟mvc实现点餐程序案例详解
Dec 24 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
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
js实现可拖动DIV的方法
2013/12/17 Javascript
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
2014/03/18 NodeJs
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
判断数组是否包含某个元素的js函数实现方法
2016/05/19 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
2018/03/01 Javascript
小程序实现多选框功能
2018/10/30 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
Node.js 路由的实现方法
2019/06/05 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
vue实现给div绑定keyup的enter事件
2020/07/31 Javascript
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
Python列表计数及插入实例
2014/12/17 Python
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
python随机生成库faker库api实例详解
2019/11/28 Python
基于python实现微信好友数据分析(简单)
2020/02/16 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
python实现信号时域统计特征提取代码
2020/02/26 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
解决virtualenv -p python3 venv报错的问题
2021/02/05 Python
进程的查看和调度分别使用什么命令
2015/03/25 面试题
假日旅行社实习自我鉴定
2013/09/24 职场文书
消防器材管理制度
2014/01/28 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
电影雷锋观后感
2015/06/10 职场文书
Django实现聊天机器人
2021/05/31 Python
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers