• 欢迎访问微视觉网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入微视觉微视觉-影视后期交流
  • 本站全面支持自动充值,目的是更好的服务大家!
  • 本站全面开启SSL服务,请放心使用!
  • 如果您觉得本站对你非常有用,那么赶紧使用Ctrl+D 收藏吧

条形码生成插件 JsBarcode

前沿资讯 Jason.w.wei 6个月前 (06-14) 249次浏览 已收录 0个评论

最近在做项目时遇到了生成条形码的需求。其实条形码的生成无非是生成一个代表某种特定信息的由粗细不等的线条组成的图片而已。解决方案也分两种,我们分别尝试了后台的 JBarcode(java 方法,感兴趣可以自己找)和前台的JsBarcode。本文将主要讲一讲JsBarcode,JsBarcode在 github 上相当火爆,搜索 barcode 匹配的第一个开源项目就是它了,它的使用也非常简单。

1.首先你需要引入相关的 JS,使用JsBarcode,你只需要引入 JQuery 和JsBarcode,一定要注意引用顺序,JsBarcode的方法会依赖 JQuery,所以一定要先引入 JQuery。我就在这个引入顺序上栽了坑。注意引入最好引用 JsBarcode.all.js,因为我发现 JsBarcode.all.min.js 经过压缩、混淆之后有些东西就找不到了会报 ERROR,至于怎么搞到相应的 js 文件,我这里将给出GITHUB 下载地址

2.然后的工作也很简单,在你的 html 页面的正确位置写下用来存放条形码图片的容器,JsBarcode 做的很强大,svg,canvas,img 标签都可以,话不多说,给大家放个简单的代码,一看便知

代码演示:

<span style="font-family:Microsoft YaHei;font-size:14px;"><!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Jsbarcode 测试</title>  
    <!--百度 jQuery 引用地址-->  
    <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>  
    <!--方式 1-->  
    <svg id="barcode"></svg>  
    <hr>  
    <!--方式 2-->  
    <canvas id="canvas"></canvas>  
    <hr>  
    <!--方式 3-->  
    <img id="bcode"/>  
    <hr>  
    <script>  
        $("#barcode").JsBarcode('Hi!');//or JsBarcode("#barcode", "Hi!");  
  
        $("#canvas").JsBarcode('Hello world!');//or JsBarcode("#barcode", "Hello world!");  
  
        $("#bcode").JsBarcode("I'm bwju!");//or JsBarcode("#barcode", "I'm bwju!");  
    </script>  
</body>  
</html></span>  

浏览器中直接运行无压力,需要注意的是我是从网上引的 JQuery 不是本地哦,断网的朋友要是跑不出结果得注意了哈。。。下面给出浏览器结果截图

条形码生成插件 JsBarcode

3.上面只是做了一个最简单的 demo,JsBarcode 基本符合我们所有的要求,例如不同的码制,文字的样式,条码的样式等等,都可以直接在 js 里设置,更详细的内容下面给出 github 上的链接,点击打开链接,希望大家都能实现自己想要的功能。。。


微视觉 , 版权所有丨如未注明 , 均为网络收集丨本网站采用BY-NC-SA协议进行授权 , 转载请注明条形码生成插件 JsBarcode
喜欢 (8)
[wuwei967@126.com]
分享 (0)

您必须 登录 才能发表评论!