打印设计器-MyPrint

MyPrint

操作简单，组件丰富的一站式打印解决方案打印设计器

说明

• 项目技术栈：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>

配套服务

客户端（本地调用打印机进行打印）

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

下载客户端

服务端（服务端生成pdf）去下载

在服务器生成pdf或者图片

支持的控件

普通控件

SVG控件

本地启动

安装依赖

# 使用 pnpm 来管理项目
pnpm i

启动项目

npm run dev

打包

npm run build:design

QQ交流群