当前位置：首页 > 文章列表 > 文章 > 前端 > JS生成条形码的几种实用方法

JS生成条形码的几种实用方法

2025-08-02 23:38:56 0浏览收藏

一分耕耘，一分收获！既然打开了这篇文章《JS生成条形码的几种方法》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

在JavaScript中生成条形码主要依赖现成库，1. JsBarcode简单易用，支持多种格式，适合大多数场景；2. QuaggaJS侧重扫描，生成功能较弱；3. bwip-js功能强大但配置复杂，适合高阶需求；应根据具体需求选择合适库，并可在React、Vue、Angular中结合生命周期封装使用，同时通过缓存、Web Worker等手段优化性能，且需妥善处理数据错误、加载失败等异常情况，确保条形码正确生成并提升用户体验。

js中如何生成条形码

在JavaScript中生成条形码，主要依赖于一些现成的库，而不是从头开始编写复杂的条形码算法。这些库已经处理了条形码的编码和绘制逻辑，你只需要传入数据即可。

解决方案

以下介绍几种常用的JavaScript条形码生成库，以及它们的使用方法：

JsBarcode:

JsBarcode是一个非常流行的条形码生成库，它支持多种条形码格式，并且易于使用。

安装:

可以通过npm安装：

npm install jsbarcode

或者直接在HTML中引入CDN链接：

<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>

使用:

<!DOCTYPE html>
<html>
<head>
  <title>JsBarcode Example</title>
</head>
<body>
  <svg id="barcode"></svg>
  <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>
  <script>
    JsBarcode("#barcode", "1234567890", {
      format: "EAN13",
      displayValue: true,
      fontSize: 20
    });
  </script>
</body>
</html>

这段代码会在页面上生成一个EAN13格式的条形码，数据为"1234567890"。displayValue设置为true会在条形码下方显示数据。

优点: 简单易用，支持多种格式，文档完善。
缺点:依赖于SVG，对于一些老旧浏览器可能需要polyfill。

QuaggaJS:
QuaggaJS主要用于条形码扫描，但它也包含生成条形码的功能。虽然不如JsBarcode专门，但在某些场景下也足够使用。
- 安装:
```
npm install quagga
```
- 使用:
  QuaggaJS的生成条形码功能不如JsBarcode直接，通常用于扫描后的结果展示。它更多的是解码，而不是生成条形码。
- 优点: 主要用于扫描，但可以辅助生成简单的条形码。
- 缺点: 生成功能相对简单，不如JsBarcode强大。

bwip-js:

bwip-js是一个更底层的条形码生成库，它提供了更多的控制选项，但使用起来也更复杂一些。

安装:
```
npm install bwip-js
```

使用:

var bwipjs = require('bwip-js');

try {
  bwipjs.toCanvas({
    output: 'barcodeCanvas',
    bcid: 'code128',       // 条形码类型
    text: '0123456789',    // 条形码数据
    scale: 3,               // 缩放因子
    height: 10,             // 条形码高度 in millimeters
    includetext: true,            // 是否显示文本
    textxalign: 'center'       // 文本对齐方式
  }, function(err, cvs) {
    if (err) {
      // Decoded the image, but the result was not good.
      // `err` is a string containing the error message.
    } else {
      // The canvas `cvs` is now painted with the barcode.
      // cvs.toDataURL() will return a PNG image.
    }
  });
} catch (e) {
  // `e` may be a string or Error object
}

这段代码将生成一个Code 128格式的条形码，并将其绘制到id为barcodeCanvas的canvas元素上。