github上的给力工具---条形码生成JsBarcode

最新推荐文章于 2024-06-29 18:23:17 发布

置顶 bwju

最新推荐文章于 2024-06-29 18:23:17 发布

阅读量1.5w

点赞数

分类专栏：可用工具文章标签： github 条形码 JsBarcode jquery javascript

本文链接：https://blog.csdn.net/u010251278/article/details/51935207

版权

可用工具专栏收录该内容

7 篇文章 1 订阅

订阅专栏

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

1.首先你需要引入相关的JS，使用JsBarcode，你只需要引入JQuery和JsBarcode，一定要注意引用顺序，JsBarcode的方法会依赖JQuery，所以一定要先引入JQuery。我就在这个引入顺序上栽了坑。注意引入最好引用JsBarcode.all.js，因为我发现JsBarcode.all.min.js经过压缩、混淆之后有些东西就找不到了会报ERROR，至于怎么搞到相应的js文件，我这里将找到的可以使用的文档传到了百度云，请点击打开链接

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不是本地哦，断网的朋友要是跑不出结果得注意了哈。。。下面给出浏览器结果截图

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