MyPrint
操作简单,组件丰富的一站式打印解决方案打印设计器
项目 | 说明 | 地址(github) | 地址(gitee) |
---|---|---|---|
MyPrint | 主项目 | 前往 | 前往 |
MyPrint-server | 服务端(去下载) | — | — |
MyPrint-desktop | 客户端(去下载) | — | — |
MyPrint-examples | 客户端 | 前往 | 前往 |
MyPrint-docker | docker构建镜像 | 前往 | 前往 |
文档 | 前往 | — | — |
体验服(demo) | 前往 | — | — |
说明
- 项目技术栈:
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))
}
}
});
vue中使用示例
导入
在main.ts中加入下面代码
// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { createPrint, MyPrinter } from 'myprint-design';
// 引入样式文件
import 'myprint-design/css/index.css';
const app = createApp(App);
// 设置pdf服务器地址(可选)
MyPrinter.initMyPrinter({
serverUrl: 'http://q-jiang.com:19898/', // 服务器地址
// disabledClient: true // 是否禁用客户端连接
});
app.use(createPrint); // 安装 myprint
app.mount('#app');
在vue组件中使用
<script setup lang="ts">
import {DesignPanel, Panel, Template} from 'myprint-design';
const emit = defineEmits(['back'])
const templateContent = {
width: 100,
height: 100,
pageUnit: 'mm',
elementList: [{
type: 'Text',
x: 10,
y: 10,
width: 50,
height: 10,
data: '磨刀霍霍向厨房',
option: {
textAlign: 'center',
verticalAlign: 'center'
}
},
{// 时间
type: 'TextTime',
x: 10,
y: 20,
width: 50,
height: 10,
option: {
formatter: '{{yyyy年MM月dd日 hh:mm:ss}}',
textAlign: 'center',
verticalAlign: 'center'
}
},
{// 图片
type: 'Image',
x: 10,
y: 30,
width: 20,
height: 20
}, {// 横实线
type: 'Image',
x: 10,
y: 30,
width: 20,
height: 20
}]
} as Panel;
const template = {
content: JSON.stringify(templateContent)
} as Template;
</script>
<template>
<!-- 如果不需要设计面板,只是打印,可以不需要引用这个组件 -->
<!-- 这个组件仅仅是面板组件 -->
<design-panel :template="template"
class="design-panel-custom"
@back="emit('back')"
:module="{
provider: JSON.stringify({width: 100, height: 100, pageUnit: 'mm'}),
previewData: '[{}]'
}" />
</template>
<style>
.design-panel-custom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: calc(100vh - 20px);
}
</style>
配套服务
客户端(本地调用打印机进行打印)
本地客户端支持局域网连接,可以做到同一局域网内别的机器的浏览器提交任务,由同一个打印机进行打印
下载客户端
架构 | 地址 | |
---|---|---|
Windows | 64位 | 下载地址 |
Windows | 32位 | 下载地址 |
Linux | x86 | 下载地址 |
Macos | Intel芯片 | 下载地址 |
Macos | Apple芯片 | 下载地址 |
服务端(服务端生成pdf)去下载
在服务器生成pdf或者图片
支持的控件
普通控件
名称 | 说明 |
---|---|
文本框 | 文本框 |
时间控件 | 时间控件,打印时间 |
图片 | 支持选择本地图片、裁剪 |
数据表格 | 一个支持多级表头,表头排序、缩放、数据统计的数据表格 |
横实线 | — |
竖实线 | — |
横虚线 | 虚线,支持修改虚线类型 |
竖虚线 | 虚线,支持修改虚线类型 |
容器 | 容器内可放置元素 |
页眉 | 页眉 |
页脚 | 页脚 |
页码 | 页码 |
SVG控件
名称 | 说明 |
---|---|
直线 | 随意角度的直线 |
一阶贝塞尔曲线 | 一条一阶贝塞尔曲线 |
二阶贝塞尔曲线 | 一条二阶贝塞尔曲线 |
手画板 | 手画板 |
椭圆 | 椭圆 |
圆 | 圆 |
多边形 | 多边形,支持增加、删除边 |
本地启动
安装依赖
# 使用 pnpm 来管理项目
pnpm i
启动项目
npm run dev
打包
npm run build:design