条形码生成怎么实现？

wen python案例 2026-07-22 172

本文目录导读：

条形码生成怎么实现？

条形码类型概述
前端实现方案
后端实现方案
在线 API 方案
数据库与批量生成
前端实时展示（Vue.js 示例）
注意事项
建议方案选择

我来详细介绍条形码生成的实现方法,包括不同技术的方案。

条形码类型概述

常见条形码类型：

EAN-13：零售商品（中国商品条码）
Code 128：物流、工业领域
Code 39：工业、医疗
QR Code：二维码（实际是二维条码）
UPC-A：美国零售商品

前端实现方案

使用 JavaScript 库

JsBarcode（最常用）

// 安装
npm install jsbarcode
// 基础使用
import JsBarcode from 'jsbarcode';
// 直接生成在 canvas 或 SVG 上
JsBarcode("#barcode", "123456789012", {
  format: "EAN13",      // 条形码类型
  width: 2,             // 条宽
  height: 100,          // 高度
  displayValue: true,   // 显示数字
  fontSize: 20,
  margin: 10
});

使用 HTML Canvas 生成

<canvas id="barcode"></canvas>
<script>
const canvas = document.getElementById('barcode');
JsBarcode(canvas, "123456789012", {
  format: "CODE128"
});
</script>

生成 SVG 格式

// 直接生成 SVG 字符串
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
JsBarcode(svg, "ABC123", {
  format: "CODE39"
});
document.body.appendChild(svg);

后端实现方案

Python - python-barcode

# 安装
pip install python-barcode
# 生成条形码
import barcode
from barcode.writer import ImageWriter
# 选择格式
EAN = barcode.get_barcode_class('ean13')
ean = EAN('123456789012', writer=ImageWriter())
# 保存为图片
ean.save('my_barcode')  # 生成 PNG 图片
# SVG 格式
ean_svg = EAN('123456789012')
ean_svg.save('my_barcode_svg')

Node.js - bwip-js

// 安装
npm install bwip-js
// 生成
const bwipjs = require('bwip-js');
bwipjs.toBuffer({
  bcid: 'code128',        // 条形码类型
  text: '12345678',       // 编码内容
  scale: 3,               // 缩放
  height: 10,             // 高度 (毫米)
  includetext: true,      // 显示文字
  textxalign: 'center'    // 文字对齐
}, (err, png) => {
  if (err) throw err;
  // png 是 Buffer
  fs.writeFileSync('barcode.png', png);
});

Java - ZXing (Zebra Crossing)

// Maven 依赖
<dependency>
    <groupId>com.google.zxing</groupId>
    <artifactId>core</artifactId>
    <version>3.5.1</version>
</dependency>
<dependency>
    <groupId>com.google.zxing</groupId>
    <artifactId>javase</artifactId>
    <version>3.5.1</version>
</dependency>
// 生成代码
import com.google.zxing.BarcodeFormat;
import com.google.zxing.client.j2se.MatrixToImageWriter;
import com.google.zxing.common.BitMatrix;
import com.google.zxing.oned.Code128Writer;
int width = 300;
int height = 100;
Code128Writer writer = new Code128Writer();
BitMatrix matrix = writer.encode(
    "12345678", 
    BarcodeFormat.CODE_128, 
    width, 
    height
);
// 输出为图片
Path path = Paths.get("barcode.png");
MatrixToImageWriter.writeToPath(matrix, "PNG", path);

在线 API 方案

使用第三方 API

// HTTP API 调用
fetch('https://api.barcodelookup.com/v3/products?barcode=123456789012&key=YOUR_API_KEY')
  .then(response => response.json())
  .then(data => console.log(data));

自建 API 服务

# Flask + python-barcode
from flask import Flask, send_file
import barcode
from barcode.writer import ImageWriter
import io
app = Flask(__name__)
@app.route('/barcode/<code>')
def generate_barcode(code):
    # 生成条形码
    EAN = barcode.get_barcode_class('ean13')
    ean = EAN(code, writer=ImageWriter())
    # 保存到内存
    buffer = io.BytesIO()
    ean.write(buffer)
    buffer.seek(0)
    return send_file(buffer, mimetype='image/png')
if __name__ == '__main__':
    app.run()

数据库与批量生成

数据库存储

-- 存储条形码图片路径
CREATE TABLE products (
    id INT PRIMARY KEY,
    name VARCHAR(100),
    barcode VARCHAR(13),
    barcode_image_path VARCHAR(255)
);
-- 直接存储 Base64
CREATE TABLE products_barcode (
    id INT PRIMARY KEY,
    name VARCHAR(100),
    barcode_base64 TEXT
);

批量生成示例（Python）

import barcode
from barcode.writer import ImageWriter
import os
from concurrent.futures import ThreadPoolExecutor
def generate_barcode(code, output_dir):
    """生成单个条形码"""
    EAN = barcode.get_barcode_class('ean13')
    ean = EAN(code, writer=ImageWriter())
    filename = os.path.join(output_dir, f'{code}.png')
    ean.save(filename)
    return filename
# 批量生成
codes = ['123456789012', '234567890123', '345678901234']
with ThreadPoolExecutor(max_workers=4) as executor:
    futures = [
        executor.submit(generate_barcode, code, 'barcodes/') 
        for code in codes
    ]
    for future in futures:
        print(f'Generated: {future.result()}')

前端实时展示（Vue.js 示例）

<template>
  <div>
    <canvas ref="barcode"></canvas>
  </div>
</template>
<script>
import JsBarcode from 'jsbarcode';
export default {
  props: {
    value: String,
    format: {
      type: String,
      default: 'CODE128'
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(newVal) {
        this.$nextTick(() => {
          JsBarcode(this.$refs.barcode, newVal, {
            format: this.format,
            width: 2,
            height: 100,
            displayValue: true
          });
        });
      }
    }
  }
};
</script>