Vue3 可视化打印设计插件｜拖拽生成票据/标签打印模板（开源体验版）

前言

Vue3 中后台项目的单据打印一直是刚需痛点：手写打印 CSS 维护成本高、传统打印插件无可视化编辑、模板无法由业务自主修改、条码/二维码/动态表格适配繁琐。

这里分享一款全新开源的 Vue3 可视化打印模板设计器 ：@squirtles331/vue3-plugin-print。支持页面内嵌拖拽设计、JSON 数据绑定、浏览器原生打印，可快速实现订单、出库单、标签、票据等打印能力。

重要说明 ：当前为 v0.1.0 首发体验版本 ，功能仅作技术预览与体验学习，距离生产环境稳定性差距较大，暂时不建议投入生产使用。

一、插件核心能力

插件主打「前端内嵌设计器 + 数据驱动打印」，无需依赖在线云端设计平台，本地项目即可完成模板制作。

可视化拖拽设计：支持元素拖拽、缩放、层级调整、锁定、对齐分布、撤销重做、网格辅助
丰富打印元素：文本、图片、直线、矩形、圆形、表格、条码、二维码、页码、多标签组件
灵活数据绑定 ：标准 JSON 驱动，支持 obj.key、array[0].key 嵌套路径取值
标准化模板规范 ：统一 TemplateDocument v1 模板结构，支持校验、迁移、导入导出
双仓储方案：默认浏览器本地存储，同时支持自定义 REST 后端仓储持久化
Vue3 原生适配：基于 Vue3.5+ 开发，内置依赖，开箱即用

二、当前版本明确边界（避坑）

为避免大家踩坑，明确首发版本能力范围与短板：

仅支持最新 Chrome / Edge 桌面浏览器，未做全机型兼容适配
无 PDF、图片导出、静默打印、云打印、批量打印能力
不支持 Vue2、Web Component、SSR / Nuxt 服务端渲染（仅客户端可测试）
生产级容错、异常兜底、复杂分页、大批量打印稳定性待优化

三、快速安装与注册

1. 安装依赖

perl 复制代码

npm install @squirtles331/vue3-plugin-print
pnpm add @squirtles331/vue3-plugin-print

2. 全局注册

javascript 复制代码

import { createApp } from "vue";
import App from "./App.vue";
import PrintTemplateStudioPlugin from "@squirtles331/vue3-plugin-print";
import "@squirtles331/vue3-plugin-print/style.css";

createApp(App).use(PrintTemplateStudioPlugin).mount("#app");

提示：SSR / Nuxt 项目仅可在客户端组件引入使用。

四、最简实战示例

内置双向绑定模板数据、业务数据源，一行方法即可唤起打印：

ini 复制代码

<template>
  <PrintTemplateStudio
    ref="designerRef"
    v-model:template="templateJson"
    v-model:runtime-data="printData"
    storage-key="order-print-demo"
    :height="760"
    @error="handleError"
  />
  <el-button @click="handlePrint">立即打印</el-button>
</template>

<script setup>
import { ref } from "vue";

const designerRef = ref(null);
const templateJson = ref(null);

// 业务打印数据源
const printData = ref({
  order: { number: "SO-20260810" },
  customer: { name: "示例客户" },
  items: [{ sku: "A-100", name: "标签纸", quantity: 2 }]
});

// 异常捕获
const handleError = ({ scope, message }) => {
  console.error("打印异常：", scope, message);
};

// 触发浏览器打印
const handlePrint = () => {
  designerRef.value.print();
};
</script>

五、核心参数与实例方法

核心 Props

v-model:template：双向绑定标准模板 JSON
v-model:runtime-data：双向绑定业务打印数据
storage-key：本地存储唯一 key，多实例必须不同
repository：自定义后端仓储，替代本地存储
height：编辑器画布高度，默认 720px

组件实例方法

print()：唤起浏览器原生打印弹窗
getTemplateDocument()：获取当前完整模板
loadTemplateDocument()：载入外部模板数据
setRuntimeData()：动态更新打印数据

六、进阶：对接后端 REST 模板仓储

插件支持自定义后端接口存储模板，适配企业级模板管理需求：

javascript 复制代码

import { createRestTemplateRepository } from "@squirtles331/vue3-plugin-print";

const repository = createRestTemplateRepository({
  baseUrl: "你的后端打印接口地址",
  getHeaders: () => ({
    Authorization: `Bearer token`
  })
});

自动适配模板增删改查接口，可实现模板云端存储、多用户共用、模板管理后台等能力。

七、适用场景

适合 Vue3 中后台 体验调试、功能预研、内部测试：销售订单、出入库单据、物料标签、条码/二维码单据、普通表单打印。

不建议正式业务投产使用。

八、开源共建与反馈征集

项目刚开源首发，大量能力待迭代，欢迎各位开发者提交建议、Bug、新需求：

👉 GitHub Issues 反馈入口

可提交类型：Bug 反馈、功能建议、体验优化、文档补充。所有合理反馈都会纳入后续版本迭代计划。

九、开源地址

NPM：www.npmjs.com/package/@sq...
GitHub：github.com/Squirtles33...
在线演示：squirtles331.github.io/vue3-plugin...
协议：MIT（开源免费，仅体验学习）

总结

这款插件补齐了 Vue3 生态内嵌可视化打印设计 的空白，无需硬写打印样式，拖拽即可生成模板，适配绝大多数 B 端打印场景的开发预研需求。但目前版本仍处于早期迭代阶段，稳定性、功能完整性均未达标，仅适合学习体验，请勿直接上线生产。欢迎大家 Star、提 Issue，共同迭代完善。

掘金标签：#Vue3 #前端打印 #可视化设计器 #vue打印插件 #B端开发 #开源项目 #票据打印