Vue3实战：集成jsBarcode与qrcode.vue实现批量标签打印

1. 为什么需要批量标签打印在仓库管理、实验室样品追踪等场景中每个物品都需要唯一的标识。传统手工填写标签不仅效率低下还容易出错。我曾经参与过一个医药仓库项目他们原先用Excel打印标签再手动贴到货架上经常出现标签与实物不符的情况。后来我们改用Vue3条形码方案后错误率直接降为零。批量标签打印的核心需求可以总结为三点唯一性每个物品必须有独立的条形码/二维码批量处理需要一次性生成数十甚至上百个标签打印控制精确控制每张标签的排版和打印效果2. 环境搭建与基础配置2.1 创建Vue3项目推荐使用Vite快速初始化项目npm create vitelatest 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 :keyitem.id img :idbarcode-index classbarcode-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 }) }) } } } /script4. 二维码集成方案4.1 qrcode.vue基础配置这个组件使用起来非常简单template qrcode-vue :valueqrText :size150 levelH :margin10 / /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/Hmargin二维码边距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要打印的区域IDtype支持html/image/pdf/jsonstyle自定义打印样式5.2 打印样式控制必须掌握的CSS打印技巧media print { body * { visibility: hidden; } #print-area, #print-area * { visibility: visible; } #print-area { position: absolute; left: 0; top: 0; } }建议使用专门的打印样式表link relstylesheet mediaprint hrefprint.css6. 完整解决方案实现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; } }