JS生成条形码/二维码 barcode.js、JsBarcode

最新推荐文章于 2025-05-21 16:18:31 发布

caoxiny

最新推荐文章于 2025-05-21 16:18:31 发布

阅读量1.9w

点赞数 3

CC 4.0 BY-SA版权

文章标签： JsBarcode barcode.js js 条形码二维码

本文链接：https://blog.youkuaiyun.com/c_artemis/article/details/86135808

本文介绍了如何使用JsBarcode和Barcode.js这两个开源库在JavaScript中生成条形码和二维码。这两个库都可以在GitHub上找到，但JsBarcode不支持IE9。提供了简单的应用示例和相关资源下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下代码均非纯原创。新手小白。网上一搜一大把的概念也不写了，直接上可运行的代码及遇到的小坑。

JsBarcode

有github，开源，github里也有xx.min.js文件，不用在别处花代币下。
JsBarcode-github：https://github.com/lindell/JsBarcode
在那里可免费下载

不支持IE9；
找到JsBarcode.all.js及完整可运行项目，有需要的可以下载（运行截图如下）csdn下载；
简易运用如下（加了js包即可直接运行）：

<!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="jquery-1.4.2.min.js"></script> 
 <script type="text/javascript" src="JsBarcode.all.js"></script> 
</head> 
<body> 
<p>1</p>
<!--  <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("IE9NoSupport");
       //or JsBarcode("#imgcode", "IE9NoSupport");  
 </script> 
</body>
</html>

Barcode.js

有github，开源，github里也有xx.min.js文件，不用在别处花代币下。
Barcode-github: https://github.com/jbdemonte/barcode
参考资料：http://www.uedsc.com/barcode-js.html

支持IE9；
完整可运行项目，有需要的可以下载（运行截图如下俩图）csdn下载；
简易运用如下（加了js包即可直接运行）：

<!doctype html>
<html>
   <head>
       <title>jQuery Barcode</title>
       <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
       <script type="text/javascript" src="../jquery-barcode.js"></script>
       <style type="text/css">
       .barcodeImg{margin:10px 0px}
       </style>
   </head>
   <body>
       <div style="margin:10px">    
           <input id="src" value="11225921991"></input><br/>                
           <input type="button" onclick='code11()' value="code11">     
           <input type="button" onclick='code39()' value="code39"> 
           <input type="button" onclick='code93()' value="code93">
           <input type="button" onclick='code128()' value="code128">
           <input type="button" onclick='ean8()' value="ean8">         
           <input type="button" onclick='ean13()' value="ean13">
           <input type="button" onclick='ean13()' value="std25">
           <input type="button" onclick='int25()' value="int25">
           <input type="button" onclick='msi()' value="msi">
           <input type="button" onclick='datamatrix()' value="datamatrix">
           <div id="bcTarget" class="barcodeImg"></div>            
       </div>

       <script type="text/javascript">


       function code11(){
           $("#bcTarget").empty().barcode($("#src").val(), "code11",{barWidth:2, barHeight:30,showHRI:false});
       }

       function code39(){
           $("#bcTarget").empty().barcode($("#src").val(), "code39",{barWidth:2, barHeight:30,showHRI:false});
       }

       function code93(){
           $("#bcTarget").empty().barcode($("#src").val(), "code93",{barWidth:2, barHeight:30,showHRI:false});
       }

       function code128(){
           $("#bcTarget").empty().barcode($("#src").val(), "code128",{barWidth:1, barHeight:30,showHRI:true,displayValue: true});
       }

       function ean8(){
           $("#bcTarget").empty().barcode($("#src").val(), "ean8",{barWidth:2, barHeight:30,showHRI:false});
       }

       function ean13(){
           $("#bcTarget").empty().barcode($("#src").val(), "ean13",{barWidth:2, barHeight:30,showHRI:false});
       }

       function std25(){
           $("#bcTarget").empty().barcode($("#src").val(), "std25",{barWidth:2, barHeight:30,showHRI:false});
       }

       function int25(){
           $("#bcTarget").empty().barcode($("#src").val(), "int25",{barWidth:2, barHeight:30,showHRI:false});
       }

       function msi(){
           $("#bcTarget").empty().barcode($("#src").val(), "msi",{barWidth:2, barHeight:30,showHRI:false});
       }

       function datamatrix(){
           $("#bcTarget").empty().barcode($("#src").val(), "datamatrix",{barWidth:2, barHeight:30,showHRI:false});
       }
       </script>

   </body>
</html>

官方运用截图如下：