保姆级教程：用Vue3+Print.js实现批量条形码打印（含移动端适配方案）

企业级批量条码打印：Vue 3 全栈方案与移动端深度适配实战

在供应链管理、仓储物流、零售盘点等现代企业运营的核心环节中，条码技术扮演着无声却至关重要的角色。想象一下，一个大型仓库每天需要处理数以万计的商品出入库，每一件商品都需要一个独一无二的“身份证”——条码标签。从生成、打印到最终被手持设备扫描识别，这个流程的顺畅与否，直接关系到作业效率与数据准确性。对于前端开发者而言，这不再是一个简单的“点击打印”功能，而是一个涉及动态数据渲染、批量排版优化、跨端兼容性以及极致性能的综合性工程挑战。

本文将深入探讨如何基于 Vue 3 生态，构建一套健壮、高效且能完美适配从桌面浏览器到移动端 PDA（掌上电脑）的批量条码打印解决方案。我们将超越基础库的简单调用，聚焦于实际生产环境中遇到的复杂场景，分享从架构设计到细节调优的全链路实践经验，旨在为面临类似需求的中高级开发者提供一份可直接落地的参考指南。

1. 项目架构与核心依赖选型

在开始编码之前，一个清晰的架构规划和合理的依赖选型是项目成功的基石。我们的目标是在 Vue 3 的响应式框架内，无缝集成条码生成与打印功能，并确保整个流程的高可用性。

技术栈核心构成：

• 前端框架：Vue 3 (Composition API)。其优秀的响应式系统和组件化能力，非常适合处理动态生成的批量数据视图。
• 构建工具：Vite。提供闪电般的冷启动和模块热更新，提升开发体验，尤其在处理大量静态资源（如图片格式的条码）时优势明显。
• 条码生成：JsBarcode。一个轻量级、支持多种条码格式（如 CODE128, EAN13）的库。选择它的关键在于其生成的条码图像质量稳定，且被市面上绝大多数扫描设备广泛支持。
• 打印控制：Print.js。一个纯前端打印解决方案，允许我们直接打印指定的 HTML 区域、图片或 JSON 数据，无需依赖浏览器原生的 window.print() 对页面全局的干扰，提供了更精细的控制能力。

注意：依赖的安装务必通过项目包管理器进行，以确保版本一致性和可维护性。避免直接引入 CDN 链接，除非有明确的特殊需求。

# 在项目根目录下执行
npm install vue@next
npm install -D vite
npm install jsbarcode print-js

一个常被忽视但至关重要的前期决策是：条码的渲染载体。JsBarcode 支持 SVG、<img> 和 <canvas>。对于打印场景，尤其是需要精确控制尺寸时，<img> 元素通常是更安全的选择。

// 在需要使用条码的组件中引入
import JsBarcode from 'jsbarcode';
import printJS from 'print-js';

2. 动态批量条码生成与渲染策略

批量生成的核心挑战在于如何高效、无冲突地管理数十、数百甚至数千个条码实例。简单的 v-for 循环渲染，在数据量激增时可能导致页面卡顿甚至崩溃。

2.1 构建响应式数据模型

首先，我们需要一个结构良好的数据源。通常，条码数据来自后端 API，包含唯一标识符和需要编码的文本信息。

import { ref, reactive, computed } from 'vue';

// 模拟从API获取的原始数据
const rawItems = ref([
  { id: 'ITEM-20231001-001', sku: 'SKU12345', name: '商品A' },
  { id: 'ITEM-20231001-002', sku: 'SKU12346', name: '商品B' },
  // ... 更多数据
]);

// 用于渲染和打印的响应式列表
const barcodeList = ref([]);

// 转换函数，为每个项添加条码相关属性
const generateBarcodeData = (items) => {
  return items.map(item => ({
    ...item,
    // 条码内容，通常是唯一ID或SKU
    barcodeText: item.sku,
    // 条码图片的Base64数据（初始为空，稍后生成）
    barcodeDataUrl: '',
    // 用于绑定DOM的唯一ID
    domId: `barcode-img-${item.id}`
  }));
};

// 初始化列表
barcodeList.value = generateBarcodeData(rawItems.value);

2.2 实现高性能批量生成

直接在 mounted 或 watch 中循环调用 JsBarcode 生成图片，对于大量数据会造成主线程阻塞。我们可以采用分片生成或虚拟滚动的思路。

方案一：分片生成（适用于几百条数据） 利用 setTimeout 或 requestAnimationFrame 将生成任务拆分成多个小任务，避免界面冻结。

const generateBarcodesBatch = async (list, batchSize = 20) => {
  for (let i = 0; i < list.length; i += batchSize) {
    const b