实现 条形码生成器 工具

分类：developer ｜ 标签：条形码、barcode、生成 生成 Code128/EAN13 等条形码并下载 SVG

2.1 功能说明

生成 Code128/EAN13 等条形码并下载 SVG

2.1.1 使用指南

功能说明

将数字/字符串生成为条形码（Code128 / EAN13 / UPC / Code39 等），可下载 SVG。

使用场景

商品标签、库存、资产管理。

2.2 代码实现

2.2.1 组件结构

本工具是一个基于 Vue 3 <script setup> 语法的单文件组件（SFC），统一包裹在 ToolPageShell 组件内，由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳；核心业务逻辑（响应式状态、计算属性、事件处理函数）全部写在 <script setup> 中，输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互，所有数据均在浏览器本地处理，不会上传服务器。

2.2.2 核心逻辑概览

<script setup> 中定义的主要函数/方法：

• render()
• download()

2.2.3 关键实现代码

以下是该工具的完整 <script setup> 实现（核心代码）。模板（<template>）与样式（<style>）已省略。

import { ref } from 'vue'
import JsBarcode from 'jsbarcode'
import ToolPageShell from '@/components/ToolPageShell.vue'

const formats = ['CODE128', 'CODE128A', 'CODE128B', 'CODE39', 'EAN13', 'EAN8', 'UPC', 'ITF14', 'MSI', 'pharmacode']
const value = ref('123456789012')
const fmt = ref('CODE128')
const displayValue = ref(true)
const svgRef = ref(null)
const error = ref('')
const ok = ref(false)

function render() {
  error.value = ''
  if (!value.value.trim()) { ok.value = false; return }
  try {
    JsBarcode(svgRef.value, value.value, { format: fmt.value, displayValue: displayValue.value, lineColor: '#000', width: 2, height: 60 })
    ok.value = true
  } catch (e) { error.value = e.message; ok.value = false }
}
function download() {
  if (!svgRef.value) return
  const svg = new XMLSerializer().serializeToString(svgRef.value)
  const blob = new Blob([svg], { type: 'image/svg+xml' })
  const a = document.createElement('a')
  a.href = URL.createObjectURL(blob)
  a.download = 'barcode.svg'
  a.click()
}
render()

2.3 效果截图

工具访问地址：https://www.i91tools.com/tools/barcode-generator