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

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

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

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


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

JsBarcode

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

  1. 不支持IE9
  2. 找到JsBarcode.all.js及完整可运行项目,有需要的可以下载(运行截图如下)csdn下载
  3. 简易运用如下(加了js包即可直接运行):
    JsBarcode运行截图chrome
<!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

  1. 支持IE9
  2. 完整可运行项目,有需要的可以下载(运行截图如下俩图)csdn下载
  3. 简易运用如下(加了js包即可直接运行):
    Barcode.js运行截图IE9
<!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>
  1. 官方运用截图如下:
     Barcode.js运行截图IE9
### 使用 Hiprint 和相关插件实现条形码二维码生成及打印 #### 条形码二维码生成 为了使用 `JsBarcode` 插件生成条形码,可以按照以下方式调用: ```javascript // 调用 JsBarcode 生成条形码 JsBarcode("#barcode", "1234567890"); // "#barcode" 是目标 DOM 元素的选择器 ``` 上述代码会将字符串 `"1234567890"` 渲染到指定的 HTML 元素中作为条形码[^3]。 对于二维码生成,则可以通过 `qrcode.js` 实现如下功能: ```javascript // 创建一个新的 QRCode 对象并渲染二维码 new QRCode(document.getElementById("qrcode"), { text: "https://example.com", width: 128, height: 128 }); ``` 此代码片段会在 ID 为 `qrcode` 的容器内生成指向 URL `https://example.com` 的二维码图像[^4]。 #### 集成 Hiprint 进行打印 在 Vue-Element-Admin 框架下集成 Hiprint 并完成打印操作需遵循特定流程。以下是具体步骤说明: 首先,在项目初始化阶段加载必要的脚本文件: ```javascript import "@/assets/plugins/hiprint/polyfill.min.js"; import "@/assets/plugins/hiprint/plugins/jquery.minicolors.min.js"; import { hiprint } from "@/assets/plugins/hiprint/hiprint.bundle.js"; import "@/assets/plugins/hiprint/plugins/jquery.hiwprint.js"; import "@/assets/plugins/hiprint/plugins/qrcode.js"; import "@/assets/plugins/hiprint/plugins/JsBarcode.all.min.js"; ``` 这些导入语句确保了所有依赖项被正确加载至应用环境中[^1]。 接着定义模板结构用于展示数据与触发打印行为: ```html <div id="print-area"> <!-- 条形码 --> <svg id="barcode"></svg> <!-- 二维码 --> <div id="qrcode"></div> <!-- 其他内容 --> </div> <button onclick="handlePrint()">打印</button> ``` 最后编写 JavaScript 函数处理实际打印逻辑: ```javascript function handlePrint() { const template = [ { name: 'Example Template', area: '#print-area', // 定义要打印的内容区域 type: 'page' // 设置页面类型或其他参数 } ]; $(document).ready(() => { hiprint.print(template); // 调用 Hiprint API 开始打印过程 }); } ``` 通过以上配置能够成功利用 Hiprint 将包含条形码二维码及其他自定义信息的部分发送给打印机执行输出任务[^2]。 #### 注意事项 - 确保所有的外部库均已正确定位并且版本兼容。 - 如果遇到跨域资源加载失败的情况,请检查服务器端 CORS 设置或者尝试调整本地开发环境中的代理规则来解决问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值