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

前言概述

在数字化转型的浪潮中，打印设计作为企业日常运营中不可或缺的一环，其效率与灵活性直接影响到业务流程的顺畅度。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               # 应用入口

功能演示

开源地址

网盘资源