您现在的位置是：博客首页 > 源码下载 > 源码下载

一款开源免费、可视化打印设计器，面向业务表单、标签、票据、快递单等场景

程序员之路2026-04-16【个人博客】人已围观

简介Vue Print Designer 是一款可视化打印设计器，面向业务表单、标签、票据、快递单等场景，支持模板化、变量化，并提供静默打印与云打印能力，同时兼容多种导出/打印方式。

前言概述

在数字化转型的浪潮中，打印设计作为企业日常运营中不可或缺的一环，其效率与灵活性直接影响到业务流程的顺畅度。Vue Print Designer 作为一个开源免费的可视化打印设计器，应运而生，旨在为业务表单、标签、票据、快递单等多样化的打印场景提供一套高效、易用的解决方案。它不仅简化了打印模板的设计流程，还通过丰富的功能模块和高度可定制的技术栈，满足了不同用户的个性化需求。本文将详细介绍 Vue Print Designer 的项目概况、应用场景、功能模块、功能特点以及项目技术栈，以期为开发者及用户提供全面而深入的了解。

项目介绍

Vue Print Designer 是一款开源免费的可视化打印设计器，它专为业务表单、标签、票据、快递单等打印场景设计，旨在帮助开发者和用户快速创建和定制打印模板，提升打印效率与准确性。

应用场景

Vue Print Designer 适用于多种打印需求场景，包括但不限于：

业务表单打印：如合同、订单、申请表等。
标签打印：如产品标签、货架标签、资产标签等。
票据打印：如发票、收据、小票等。
快递单打印：适应不同快递公司的运单格式要求。

功能模块

模板设计器

可视化编辑：提供直观的拖拽式界面，用户可以轻松添加、删除、移动和调整打印元素。
元素库：包含文本、图片、条形码、二维码等多种打印元素，满足多样化打印需求。
属性编辑：允许用户自定义每个元素的属性，如字体、大小、颜色、对齐方式等。
布局调整：支持网格对齐、元素锁定、分组等功能，便于用户进行精细布局。

模板管理

模板保存与加载：用户可以保存设计好的模板，并在需要时快速加载使用。
模板分类：支持对模板进行分类管理，便于查找和复用。
模板导出与导入：允许用户将模板导出为文件，或从文件中导入模板，实现模板的共享与迁移。

打印预览与输出

实时预览：提供实时打印预览功能，用户可以在设计过程中随时查看打印效果。
打印设置：支持选择打印机、设置纸张大小、方向、边距等打印参数。
打印输出：支持直接打印或导出为PDF、图片等格式，满足不同打印需求。

功能特点

开源免费：项目采用AGPL-3.0开源协议，用户可以自由使用、修改和分发。
跨平台支持：基于Vue.js框架开发，支持在多种操作系统和浏览器上运行。
高度可定制：提供丰富的API和扩展点，允许开发者根据实际需求进行二次开发。
用户友好：界面简洁明了，操作直观易懂，降低用户学习成本。
响应式设计：适应不同屏幕尺寸和设备类型，提供良好的用户体验。

安装依赖

npm i vue-print-designer

# 或

pnpm add vue-print-designer

# 或

yarn add vue-print-designer

设计器页

<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>

业务页面

// 任何页面中只要能拿到元素实例即可

const el = document.querySelector('print-designer') as any;


// 打印

await el.print({ mode: 'browser' });


// 导出 PDF / 图片 / Blob

await el.export({ type: 'pdf', filename: 'order-20240223.pdf' });

const pdfBlob = await el.export({ type: 'pdfBlob' });

事件回调

el.addEventListener('ready', () => {});

el.addEventListener('printed', (e) => {});

el.addEventListener('exported', (e) => {
    
const blob = e.detail?.blob;

});

el.addEventListener('error', (e) => {
    
console.error(e.detail?.scope, e.detail?.error);

});

项目结构

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               # 应用入口