Vue3实战：集成jsBarcode与qrcode.vue实现批量标签打印
1. 为什么需要批量标签打印？
在仓库管理、实验室样品追踪等场景中，每个物品都需要唯一的标识。传统手工填写标签不仅效率低下，还容易出错。我曾经参与过一个医药仓库项目，他们原先用Excel打印标签再手动贴到货架上，经常出现标签与实物不符的情况。后来我们改用Vue3+条形码方案后，错误率直接降为零。
批量标签打印的核心需求可以总结为三点：
- 唯一性：每个物品必须有独立的条形码/二维码
- 批量处理：需要一次性生成数十甚至上百个标签
- 打印控制：精确控制每张标签的排版和打印效果
2. 环境搭建与基础配置
2.1 创建Vue3项目
推荐使用Vite快速初始化项目：
npm create vite@latest barcode-print --template vue cd barcode-print npm install2.2 安装核心依赖
这三个库是项目的核心支柱：
npm install jsbarcode qrcode.vue print-js我建议在package.json中固定版本号，避免后续版本更新导致API变化：
"dependencies": { "jsbarcode": "^3.11.5", "qrcode.vue": "^3.3.3", "print-js": "^1.6.0" }3. 条形码生成实战
3.1 jsBarcode基础使用
在组件中引入并生成基础条形码：
import JsBarcode from 'jsbarcode' const generateBarcode = () => { JsBarcode('#barcode', '12345678', { format: 'CODE128', width: 2, height: 60, displayValue: true }) }常见坑点：
- 元素必须已经渲染到DOM中才能生成条形码
- 同一个元素重复生成会覆盖前一个
- 特殊字符需要额外处理
3.2 批量生成解决方案
通过v-for循环配合动态ID实现批量生成：
<template> <div v-for="(item, index) in items" :key="item.id"> <img :id="'barcode-'+index" class="barcode-img"> </div> </template> <script> export default { methods: { generateAllBarcodes() { this.items.forEach((item, index) => { JsBarcode(`#barcode-${index}`, item.code, { format: 'CODE39', lineColor: '#000', width: 1.5 }) }) } } } </script>4. 二维码集成方案
4.1 qrcode.vue基础配置
这个组件使用起来非常简单：
<template> <qrcode-vue :value="qrText" :size="150" level="H" :margin="10" /> </template> <script> import QrcodeVue from 'qrcode.vue' export default { components: { QrcodeVue }, data() { return { qrText: 'https://example.com/item/123' } } } </script>参数说明：
- size：控制二维码物理尺寸
- level：纠错级别（L/M/Q/H）
- margin：二维码边距
4.2 动态内容生成
结合业务数据动态生成内容：
computed: { qrCodes() { return this.items.map(item => ({ id: item.id, value: `${window.location.origin}/item/${item.id}` })) } }5. 打印功能实现
5.1 PrintJS基础配置
最简单的打印调用方式：
printJS({ printable: 'print-area', type: 'html', style: '@page { size: auto; margin: 0mm; }' })关键参数：
- printable：要打印的区域ID
- type：支持html/image/pdf/json
- style：自定义打印样式
5.2 打印样式控制
必须掌握的CSS打印技巧：
@media print { body * { visibility: hidden; } #print-area, #print-area * { visibility: visible; } #print-area { position: absolute; left: 0; top: 0; } }建议使用专门的打印样式表：
<link rel="stylesheet" media="print" href="print.css">6. 完整解决方案实现
6.1 组件结构设计
推荐的文件结构：
components/ LabelPrinter/ LabelItem.vue # 单个标签模板 LabelPreview.vue # 预览组件 PrintController.vue # 打印控制6.2 数据流处理
使用Pinia管理标签数据：
// stores/labelStore.js export const useLabelStore = defineStore('labels', { state: () => ({ items: [], template: 'default' }), actions: { async loadItems() { const res = await api.get('/items') this.items = res.data.map(item => ({ ...item, barcode: generateBarcodeValue(item) })) } } })6.3 性能优化技巧
- 虚拟滚动：处理大批量标签时使用vue-virtual-scroller
- 生成节流：使用requestIdleCallback分批生成
- 缓存机制：对已生成的条码进行缓存
const generateBarcodes = () => { if (!window.requestIdleCallback) { // 兼容方案 items.value.forEach(genBarcode) } else { let index = 0 const processItem = (deadline) => { while (index < items.value.length && deadline.timeRemaining() > 0) { genBarcode(items.value[index]) index++ } if (index < items.value.length) { requestIdleCallback(processItem) } } requestIdleCallback(processItem) } }7. 常见问题排查
7.1 条码显示不全
可能原因及解决方案：
- 容器尺寸不足：检查img元素的width/height
- 打印边距问题：调整@page的margin
- 缩放问题：避免使用transform缩放
7.2 打印内容错位
调试步骤：
- 检查打印预览与实际效果差异
- 确认所有尺寸单位使用px或mm
- 测试不同浏览器的打印效果
7.3 异步渲染问题
推荐解决方案：
await nextTick() generateBarcodes() setTimeout(print, 300) // 确保所有内容渲染完成8. 进阶功能扩展
8.1 模板自定义
实现动态模板选择：
const templates = { simple: { fields: ['name', 'barcode'], style: `...` }, detailed: { fields: ['name', 'code', 'barcode', 'qr'], style: `...` } }8.2 数据库集成
典型的数据流转方案：
- 从ERP系统获取物品列表
- 生成标签数据并缓存
- 记录打印日志
8.3 移动端适配
针对移动设备的优化：
@media (max-width: 768px) { .label-item { width: 100%; margin: 5px 0; } }