• 欢迎访问微视觉网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站。
  • 欢迎使用免费图床
  • 站长的又一个博客站点,快去看看吧!
  • 本站全面开启SSL服务,请放心使用!
  • 如果您觉得本站对你非常有用,那么赶紧使用Ctrl+D 收藏吧

条形码生成插件 JsBarcode

前沿资讯 Jason.w.wei 1年前 (2018-06-14) 633次浏览 已收录 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
喜欢 (10)
[wuwei967@126.com]
分享 (0)

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