MyPrintDesign

项目	说明	地址(github)	地址(gitee)
MyPrint	主项目	`前往`
MyPrint-server	服务端`(去下载)`	—	—
MyPrint-examples	客户端	`前往`
MyPrint-docker	docker构建镜像	`前往`
文档	`前往`	—	—

说明

项目技术栈:Vue@3.4.31 TypeScript@5.0.2 Vite@5.2.6
打印设计面板,设计结果支持打印、生成pdf、生成图片,支持浏览器、客户端、服务端三种生成,并且三种方式生成结果高度统一。
支持多级表头数据表格,表格支持条形码与二维码,以及表格数据统计。
支持svg、手画板。
操作简单,内置快捷键:Ctrl+c、Ctrl+v快速复制粘贴、Ctrl+s保存、Ctrl+z回滚、Ctrl+y重做、方向键微调位置。
多种安装方式支持centos、debian、docker、k8s 一键安装

更新日志

有图有真相

设计预览

QQ交流群

如何使用

npm 安装

npm install myprint-design

yarn add -D myprint-design

浏览器直接引入

直接通过浏览器的 HTML 标签导入 MyPrint,然后就可以使用全局变量 MyPrintDesign 了。

<link rel="stylesheet" href="//jsd.onmicrosoft.cn/npm/myprint-design/css/styles/index.css" />
<!-- Import Vue 3 -->
<script src="//jsd.onmicrosoft.cn/npm/vue@3"></script>
<!-- Import component library -->
<script src="//jsd.onmicrosoft.cn/npm/myprint-design"></script>

在线示例

通过 CDN 的方式我们可以很容易地使用 MyPrint 写出一个设计页面。直接引用(仅支持ts)

下载本项目(参考package/demo)

如何引用?

.
├─ packages
│ ├─ demo
│ ├─ design
└─ └─ docs

复制design代码 到对应项目目录下

配置 vite.config.ts

#vite.config.ts
export default defineConfig({
 ...
 resolve: {
 alias: {
 'myprint-design': fileURLToPath(new URL('../design/src', import.meta.url))
 }
 }
});

配套服务

客户端(本地调用打印机进行打印)

本地客户端支持局域网连接,可以做到同一局域网内别的机器的浏览器提交任务,由同一个打印机进行打印

下载客户端

架构

地址

Windows

64位

下载地址

Linux

x86

下载地址

Macos

Apple芯片

服务端(服务端生成pdf)支持的控件

普通控件

名称	说明
文本框	文本框
时间控件	时间控件,打印时间
图片	支持选择本地图片、裁剪
数据表格	一个支持多级表头,表头排序、缩放、数据统计的数据表格
横实线	—
竖实线	—
横虚线	虚线,支持修改虚线类型
竖虚线	虚线,支持修改虚线类型
容器	容器内可放置元素
页眉	页眉
页脚	页脚
页码	页码

SVG控件

名称	说明
直线	随意角度的直线
一阶贝塞尔曲线	一条一阶贝塞尔曲线
二阶贝塞尔曲线	一条二阶贝塞尔曲线
手画板	手画板
椭圆	椭圆
圆	圆
多边形	多边形,支持增加、删除边