如何引入jsbarcode，并在页面显示条形码

在 Vue 中生成条形码的方案

如果你需要在 Vue 项目中生成条形码，可以使用以下专门的条形码库：

1. JsBarcode

这是最流行的 JavaScript 条形码生成库，支持多种条形码格式。

安装：

npm install jsbarcode @types/jsbarcode --save

Vue2 组件示例：

<template>
  <div>
    <h2>条形码生成器</h2>
    <input v-model="barcodeText" placeholder="输入条形码内容">
    <select v-model="barcodeFormat">
      <option value="CODE128">CODE128</option>
      <option value="EAN13">EAN-13</option>
      <option value="UPC">UPC</option>
      <option value="ITF14">ITF-14</option>
    </select>
    <button @click="generateBarcode">生成条形码</button>
    
    <svg ref="barcode"></svg>
    <img v-if="barcodeImageUrl" :src="barcodeImageUrl" alt="条形码">
  </div>
</template>

<script>
import JsBarcode from 'jsbarcode'

export default {
  data() {
    return {
      barcodeText: '123456789012',
      barcodeFormat: 'CODE128',
      barcodeImageUrl: ''
    }
  },
  mounted() {
    this.generateBarcode()
  },
  methods: {
    generateBarcode() {
      try {
        // 生成到SVG
        JsBarcode(this.$refs.barcode, this.barcodeText, {
          format: this.barcodeFormat,
          width: 2,
          height: 100,
          displayValue: true,
          fontSize: 16,
          margin: 10
        })
        
        // 生成图片URL
        const canvas = document.createElement('canvas')
        JsBarcode(canvas, this.barcodeText, {
          format: this.barcodeFormat,
          width: 2,
          height: 100
        })
        this.barcodeImageUrl = canvas.toDataURL('image/png')
      } catch (err) {
        console.error('生成条形码失败:', err)
      }
    }
  }
}
</script>

2. bwip-js

另一个功能强大的条形码生成库，支持更多专业格式。

安装：

bash

复制

下载

npm install bwip-js

使用示例：

import bwipjs from 'bwip-js'

// 生成到canvas
bwipjs.toCanvas('mycanvas', {
  bcid: 'code128',       // 条形码类型
  text: '123456789',     // 要编码的文本
  scale: 3,              // 缩放比例
  height: 10,            // 条形码高度(mm)
  includetext: true,     // 显示可读文本
  textxalign: 'center'   // 文本对齐
})

如何选择

• 如果需要标准商品条形码（如 EAN-13、UPC）：使用 JsBarcode 或 bwip-js
• 如果需要二维码：使用 qrcode.js
• 如果两者都需要：可以在项目中同时安装 qrcode 和 jsbarcode 两个库

注意事项

1. 不同条形码格式有不同要求：

   • EAN-13 必须是12或13位数字
   • UPC 必须是11或12位数字
   • CODE128 可以包含字母和数字

2. 在商业应用中，使用条形码可能需要购买许可证，特别是 UPC 和 EAN 码

3. 打印条形码时，要确保足够的对比度和适当的尺寸，以便扫描器能够正确读取