Vue 3可视化打印模板设计器 print-canvas-designer

用 Vue3 打造可扩展的打印模板设计器，灵活应对标签排版

在企业级业务系统中，标签打印最常见的难题并非一次性输出功能，而是一套需要持续迭代的编辑能力。

例如，鞋盒标通常需要展示款号、颜色、尺码、品牌图片、条形码和二维码——单看元素并不复杂。但现实是，不同客户对布局的要求各不相同，即使同一客户也可能后期调整模板。如果全靠开发人员在页面上固定位置，每次排版变更都要重新发版，迭代效率无疑会大打折扣。

因此，清晰的解决思路是：

基于这一目标，我开发了一款 Vue 3 打印模板画布组件：print-canvas-designer，并配套了真实接入示例项目 print-canvas-examples，内含演示和参考文档。

它解决了哪些痛点

print-canvas-designer 主要适用于标签、鞋盒标、物流面单、商品贴纸等需要自由排版的打印场景。

当前版本支持的能力清单如下：

• 文本、图片、矩形、横线、二维码、条形码等基础组件。
• A4、100 x 60 以及自定义纸张尺寸。
• 元素选中、拖拽、缩放、旋转、复制、删除、锁定、隐藏、层级调整。
• 标尺、网格、参考线、页边距、安全区和缩放控制。
• 文本字段渲染和换行策略。
• 图片地址设置，支持通过业务上传方法写入图片地址。
• 打印和导出 PDF。
• 自定义业务组件及对应的属性编辑区域。
• 支持完整编辑器接入，也可以只接入画布、自行搭建外围 UI。

需要特别指出：打印设计器的核心并非固定的左侧面板或右侧表单，而是画布本身。不同业务对组件和属性的需求差异极大，因此画布只提供基础编辑能力，具体需要呈现哪些组件，交由业务自行决定。

三种接入方式

为了演示 npm 包在真实 Vue3 项目里的接入方式，print-canvas-examples 提供了三类场景：

1. 完整编辑器：直接使用默认的工具栏、组件面板、画布与属性面板。
2. 自定义业务组件：将鞋盒标信息块作为业务组件注册到画布。
3. 只接入画布：左侧组件区、顶部工具栏、右侧属性区全部由业务项目自己实现。

在线示例（点我）

快速上手：使用完整编辑器

安装依赖：

npm install print-canvas-designer

在入口文件引入样式：

import 'print-canvas-designer/style.css'

页面中使用完整编辑器：

v-model 绑定的就是模板数据。业务系统可以将这份 JSON 保存到数据库，后续重新传给组件即可还原模板。

为何支持只接入画布

完整编辑器适合快速集成，但在真实项目里，已有系统通常拥有自己的页面布局和交互方式：

• 左侧可能不是基础组件列表，而是“商品字段”“订单字段”“客户 Logo”等业务物料。
• 右侧可能需要结合权限、表单校验、字段绑定以及业务规则。
• 顶部操作区可能需要与系统现有的保存、审核、发布流程对接。

此时仅接入 PrintCanvas 就派上用场了，页面的整体结构完全由业务自主掌控。

面板和画布之间通过同一个 designer 实例通信。例如，选中元素后，业务属性表单可以调用：

designer.updateElement(activeId, { field: 'styleColorSize' })
designer.updateElementStyle(activeId, { width: 200, height: 42 })
designer.removeElement(activeId)
designer.undo()
designer.redo()
designer.sa ve()

这样一来，画布负责编辑交互，业务系统负责 UI 和数据规则，分工清晰明确。

自定义组件：以鞋盒标信息块为例

基础文本组件已经可以通过字段渲染业务内容，但有些重复出现、结构固定的区域，更适合封装成业务组件。

比如鞋盒标中的商品信息区域，通常固定包含：

• 标题，例如 SPORT SERIES。
• 主内容，例如 RUNNER-01 / BLACK / 42。
• 副内容，例如 STYLE / COLOR / SIZE。
• 强调颜色或品牌样式。

业务可以定义一个组件，在画布中负责展示结构，同时为它提供独立的属性编辑 UI。组件内容、业务字段和表单交互由业务自行实现，画布仍然提供选中、移动、缩放、旋转、删除和保存等基础能力。

import {
  defaultPrintComponents,
  type PrintComponentDefinition
} from 'print-canvas-designer'
import ShoeInfoBlockRender from './ShoeInfoBlockRender.vue'
import ShoeInfoBlockInspector from './ShoeInfoBlockInspector.vue'const shoeInfoBlock: PrintComponentDefinition = {
  type: 'shoe-info-block',
  label: '鞋盒标信息块',
  icon: 'i-lucide-tag',
  render: ShoeInfoBlockRender,
  inspector: ShoeInfoBlockInspector,
  createElement: (point) => ({
    id: `shoe_${Date.now()}`,
    type: 'shoe-info-block',
    name: '鞋盒标信息块',
    props: {
      title: 'SPORT SERIES',
      mainText: 'RUNNER-01 / BLACK / 42',
      subText: 'STYLE / COLOR / SIZE',
      accentColor: '#2563eb'
    },
    style: {
      position: 'absolute',
      left: point.x,
      top: point.y,
      width: 260,
      height: 92,
      rotate: 0
    }
  })
}export const components = [
  ...defaultPrintComponents,
  shoeInfoBlock
]

将其传给完整编辑器，即可在物料列表和画布中使用：

在只接入画布的模式下，也可以将同样的 components 传给 createPrintDesigner。也就是说，自定义组件并不仅仅是完整编辑器才有的能力，而是画布 SDK 提供给业务的扩展机制。

模板数据与业务数据如何协同

模板本身保存的是布局与元素配置，实际打印数据则在运行时传入。

以文本为例，模板中可以保存字段名：

{
  "type": "text",
  "name": "款色码",
  "field": "styleColorSize",
  "style": {
    "left": 24,
    "top": 32,
    "width": 220,
    "height": 42
  }
}

业务在打印前把多个字段拼接为需要展示的内容：

const printData = {
  styleColorSize: [product.style, product.color, product.size].join(' / ')
}

这种方式让画布保持通用，不必为每一种业务字段组合设计专门的布局规则。

图片、打印与导出

图片组件既可以直接填写图片地址，也可以将上传过程交给业务系统：

const uploadImage = async (file: File) => {
  const url = await uploadToObjectStorage(file)
  return url
}

输出方面，完整编辑器提供了打印和导出 PDF 的交互入口。只接入画布时，也可以通过 designer.print() 和 designer.exportPdf() 接入自己的操作入口和输出流程。

当前阶段与后续计划

当前版本主要聚焦于打印模板画布的核心能力，以及业务扩展所需的组件机制。已经可以用于搭建标签类模板并验证实际接入方式。

后续计划继续完善的方向：

• 更丰富的自定义业务组件示例。
• 模板管理、保存与复用场景的参考实现。
• 打印与导出流程在真实业务中的接入示例。

相关地址

• npm
• 文档
• 画布演示
• Vue3 集成示例
• GitHub