Vue 3打印模板设计器：print-canvas-designer

在业务系统开发中，打印功能往往需要持续维护和调整，传统固定排版方式难以满足灵活需求。本文将介绍基于Vue3开发的可扩展打印模板设计器解决方案。

我用 Vue3 做了一个可扩展的打印模板设计器

传统标签打印功能存在明显局限性，它通常被设计为一次性输出功能，而非可维护的编辑系统。以鞋盒标为例，需要展示款号、颜色、尺码等多样化信息，且不同客户的布局需求各异，甚至同一客户也会频繁调整模板样式。若每次调整都需要开发人员修改代码并重新发版，不仅效率低下，也难以满足业务快速变化的需求。

针对这一痛点，我开发了Vue3打印模板画布print-canvas-designer，配套提供了真实接入示例项目print-canvas-examples及相关文档。

它解决什么问题

print-canvas-designer 主要面向需要灵活排版的打印场景，如商品标签、物流面单等。

当前功能包括：

1. 支持文本、图片、条形码等多种基础组件。
2. 提供A4、自定义尺寸等多种纸张规格。
3. 实现元素拖拽、缩放、旋转等完整编辑功能。
4. 内置标尺、网格、参考线等辅助工具。
5. 支持文本字段渲染与自动换行。
6. 提供图片上传与地址设置功能。
7. 支持打印和PDF导出。
8. 允许自定义业务组件及属性编辑区。
9. 支持完整编辑器或仅画布的灵活接入方式。

该设计器的核心价值在于画布本身的编辑能力，而非固定的UI布局。不同业务可根据需求自由定义所需组件和属性。

三种接入方式

为展示实际项目中的接入方案，print-canvas-examples提供了三类典型场景：

1. 完整编辑器：使用默认工具栏和面板。
2. 自定义业务组件：将特定业务模块注册为组件。
3. 仅接入画布：自行实现外围UI界面。

在线示例（点我）

最快接入：使用完整编辑器

安装依赖：

npm install print-canvas-designer

引入样式文件：

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

在页面中使用编辑器：

模板数据通过v-model双向绑定，业务系统可将JSON保存至数据库，实现模板持久化。

为什么支持只接入画布

完整编辑器适合快速启动项目，但实际业务系统通常需要：

1. 左侧面板展示业务特定字段而非基础组件。
2. 右侧属性区需要集成权限控制和表单验证。
3. 顶部操作区需对接现有业务流程。

此时可选择仅接入PrintCanvas，自主构建界面布局。

面板与画布通过designer实例通信，业务代码可调用：

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

这种设计实现了编辑交互与业务逻辑的分离。

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

对于固定结构的业务区块，可封装为独立组件。例如鞋盒标信息区域通常包含：

1. 主标题内容
2. 产品规格信息
3. 辅助说明文字
4. 品牌样式元素

业务可定义专用组件，由画布处理基础交互，业务代码负责具体内容和属性编辑。

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
]

注册组件后即可在编辑器中使用：

自定义组件机制是画布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导出，仅接入画布时也可通过API实现相同功能。

当前阶段与后续计划

当前版本已实现画布核心功能与业务扩展机制，能够满足标签类模板的基本需求。

未来计划重点完善：

1. 更多业务组件示例
2. 模板管理与复用方案
3. 真实业务中的打印流程示例

相关地址

1. npm包
2. 使用文档
3. 画布演示
4. Vue3集成示例
5. GitHub仓库

这款基于Vue3的打印模板设计器通过灵活的架构设计，既提供了开箱即用的完整解决方案，又支持深度定制开发，能够有效解决业务系统中打印模板的维护难题。