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 相关文章推荐
JQuery 学习笔记 选择器之六
Jul 23 Javascript
jQuery示例收集
Nov 05 Javascript
解析window.open的使用方法总结
Jun 19 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
js利用prototype调用Array的slice方法示例
Jun 09 Javascript
在jQuery中处理XML数据的大致方法
Aug 14 Javascript
浅谈jquery页面初始化的4种方式
Nov 27 Javascript
提升页面加载速度的插件InstantClick
Sep 12 Javascript
js实现左右两侧浮动广告
Jul 09 Javascript
[原创]微信小程序获取网络类型的方法示例
Mar 01 Javascript
Node如何后台数据库使用增删改查功能
Nov 21 Javascript
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
微信小程序页面传值实例分析
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中is_null,empty,isset,unset 的区别详细介绍
2013/04/28 PHP
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
解决laravel中日志权限莫名变成了root的问题
2019/10/17 PHP
首页图片漂浮效果示例代码
2014/06/05 Javascript
jQuery获取父元素及父节点的方法小结
2016/04/14 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
JavaScript实现QQ列表展开收缩扩展功能
2017/10/30 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
Django实现全文检索的方法(支持中文)
2018/05/14 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
利用python求积分的实例
2019/07/03 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
python实现三种随机请求头方式
2021/01/05 Python
CSS3实现类似翻书效果的过渡动画的示例代码
2019/09/06 HTML / CSS
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
亚洲独特体验旅游专家:eOasia
2018/08/15 全球购物
房地产员工找工作的自我评价
2013/11/15 职场文书
小学生放飞梦想演讲稿
2014/08/26 职场文书
2015年党员自我剖析材料
2014/12/17 职场文书
2015年施工员工作总结范文
2015/04/20 职场文书
货款欠条范本
2015/07/03 职场文书
浅析Python中的套接字编程
2021/06/22 Python
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python