本文实例讲述了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>
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>
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切换特效与技巧总结》、《javascript图形绘制技巧总结》、《javascript查找算法技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。
如对本文有疑问, 点击进行留言回复!!
Agora 开源 | 一个 Demo,帮你快速实现社交直播四大场景
vuejs (2)- Vue 生命周期 和 VueJS ajax
网友评论