打印设计器-MyPrint

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

QQ交流群