别再手写打印模版了!一款功能强大的开源打印工具,集可视化拖拽、变量、静默打印、云打印等功能于一体

点击下方【IT学习日记】 "关注"、选择 "设为标星"

每天三分钟、打卡阅读

最快获取全网学习干货、行业资讯

简介

Print-Designer是一款面向企业业务场景的开源可视化打印设计平台，专为解决传统模式下表单、标签、票据、快递单等打印场景中的设计复杂、输出不理想等难题设计。系统集可视化拖拽式模板设计、打印预览、变量绑定、参数配置、静默打印、云打印和多格式导出等核心功能于一体，帮助企业快速搭建一套拖拽式编辑、模版复用的打印系统。

系统基于现代前端技术构建，采用Web Components设计理念，具备优秀的拓展性和夸框架能力，可快速在Vue、React、Angular等项目直接使用，实现“即插即用”。系统通过可视化方式代替传统手写模版、内置静默打印和云打印功能，大幅度降低企业开发成本，十分适用于合同打印、企业后台、ERP、WMS、MES、电商订单、财务票据、物流面单等业务场景。

技术架构

技术栈：

技术框架：Vue、TypeScript构建工具：Vite状态管理：Pinia组件形态：Web Components支持框架：Vue、React、Angular、原生 HTML国际化：内置中文和英文

项目结构：

src/├── assets/               # 静态资源（Logo、图标）├── components/           # Vue 组件│   ├── canvas/           # 画布组件│   ├── common/           # 通用组件（颜色选择器、弹窗等）│   ├── elements/         # 打印元素组件（文本、图片、表格、条码等）│   ├── layout/           # 布局组件（头部、侧边栏、属性面板等）│   ├── print/            # 打印渲染组件│   └── properties/       # 属性配置组件├── composables/          # Vue 组合式函数│   ├── useAutoSave.ts    # 自动保存│   ├── usePrintSettings.ts # 打印设置│   └── useTheme.ts       # 主题管理├── constants/            # 常量定义├── locales/              # 国际化语言包├── stores/               # Pinia 状态管理├── types/                # TypeScript 类型声明├── utils/                # 工具函数├── web-component.ts      # Web Components 入口└── main.ts               # 应用入口

功能列表

可视化模板设计：

支持全称拖拽式设计，无需手写代码即可快速完成打印
支持文本、图片、条码、二维码、表格等元素，适配不同用户的使用需求
支持网格对齐、分组、锁定等高级布局能力，所见即所得，实时预览效果

智能表格分页：

支持自动打印分页，表头、表尾重复
支持自动适配复杂业务单据，满足复杂业务场景下的使用需求

模板管理：

支持模板保存、加载，提高工作效率
支持模板一键导入、导出
支持模板分类管理，方便用户快速查找
支持跨系统共享模板

打印管理：

支持浏览器打印
支持PDF、图片等多种格式导出、多格式兼容、合并、拆分
支持Blob 数据输出
支持静默打印（无需弹窗确认）、云打印
支持主流平台使用（Windows、macOS、Linux）

其他功能

支持模板变量绑定、API数据注入
支持批量打印场景
支持Vue、React、Angular、原生 HTML快速拓展

功能截图

设计界面：

打印预览：

参数配置：

系统配置：

表格编辑：

快捷功能：

系统集成：

打印客户端：

快速开始

说明：适合任何技术栈（Vue/React/Angular/原生）。Web Components 方式支持 Vue 2（作为自定义元素使用），无需 Vue 2 组件适配。

1、安装依赖：

npm i vue-print-designer# 或pnpm add vue-print-designer# 或yarn add vue-print-designer

2、使用组件(Vue3 / Vite)

// main.tsimport 'vue-print-designer';import 'vue-print-designer/style.css';

在页面里直接使用自定义元素：

<template>    <print-designer id="designer"></print-designer></template>

3、初始化与调用分离

<script lang="ts">export default {    mounted() {        const el = this.$refs.designerRef as any;        // 初始化品牌与主题        el.setBranding({ title: '业务打印设计器', showLogo: true });        el.setTheme('light');        // 初始化模板或变量        el.loadTemplateData(/* 从你的 API 获取的数据 */);        el.setVariables({ orderNo: 'A001' }, { merge: true });    }};</script><template>    <print-designer ref="designerRef"></print-designer></template>

更新进度

1000+优质开源项目更新进度：480/1000。如需更多类型优质项目推荐，请在文章后留言。

开源地址&使用手册

点击下方小程序 进入 开源项目 获取！（文件夹名称跟上面的更新期数一样）

往期精彩

农业管理神器！一款开源的农业物联网系统，助你低成本打造自己的农业物联网平台

挖到宝藏了！一款开源免费的智慧农业系统，集设备接入、视频监控、农事管理、产品溯源功能于一体

开源ERP天花板！一款功能全面、100%开源的ERP系统，一键打通财务+进销存+CRM+HR企业全场景使用

获取更多精彩内容和开源项目 ，请关注微信公众号！

免责声明

1、本文所分享的软件、代码或资源，均来自开源社区，遵循其原始许可证（如MIT、GPL等）。仅供学习和研究使用，严禁用于任何违法行为。2、使用者在下载、部署或使用本项目（或文中提及的软件）时，需自行判断其适用性与合法性，由此产生的一切风险与责任均由使用者自行承担。3、我们尊重原作者的知识产权，已在文中注明来源及原始作者（如有遗漏，请联系我们及时更正或删除）。4、本文不对开源软件的安全性、可用性或完整性做任何保证，亦不承担由其引发的任何直接或间接损失责任。5、若您为相关软件/资源的版权方，对内容有异议，请联系我们，我们将在第一时间处理