开源低代码平台-Microi吾码 🔥 

    🔸技术框架：.NET8 + MySql/SqlServer/Oracle + Vue2/3 + Element-UI/Element-Plus

    🔸平台始于2014年（基于Avalon.js），2018年使用Vue重构，于2024年10月29日开源

    🔸Vue3试用地址（仅查询）：https://microi.net

    🔸Vue2传统界面试用地址（可操作数据）：https://demo.microi.net/

    🔸更新日志： Loading...

    🔸GitCode开源地址：GitCode - 全球开发者的开源社区,开源代码托管平台

    🔸Gitee开源地址：microi.net: 开源低代码平台-Microi吾码，基于.NET8+Vue3+Element-Plus，始于2014年（基于Avalon.js），2018年使用Vue重构，于2024年10月开源。

1. 📢 开场白 

今天要隆重介绍下这款插件Microi.Net-动态打印引擎，因为本人有幸受邀参与了Microi吾码-开源低代码平台Vue3版本的开发，今后会与原创团队共同维护和完善该项目。

本人目前主要参与项目两款插件的开发和后续维护工作，一个是  Microi.Net-界面设计引擎 ，另一个是 动态打印引擎 Microi.Net-动态打印引擎 ，目前两个插件主体已基本构建完成，后续会持续更新迭代和完善。目前展示的只是demo版，后续更多功能会集成在平台上,以平台最新发布版本为主。

2. 初体验 🦋

演示地址：Microi.Net-动态打印引擎

​

​

3. 插件简介 ☘️

Microi.Net-动态引擎 主要解决了低代码平台的动态打印任务，我可以说只要祭出杀手锏 iframe html 组件，基本可以满足客户绝大部分无礼的打印要求。

打印小组件包括:

1. 普通文本：可以设置文本的各种字体、颜色、背景等样式，不可或缺的角色。
2. 键值对文本：打印模板常用格式，配置如上。
3. 动态表格：超强动态表格，可以实现各种场景需求，试过就知道。
4. 静态表格：可以满足基本业务需求。
5. 二维码：可以满足基本需求，如果需要更好的体验感，可以使用草料二维码制成图片。
6. 图片：门面担当，人靠衣装，马靠鞍，精美的模板必不可少。
7. 条形码：可以满足基本需求，如果需要更好的体验感，可以使用草料二维码制成图片。
8. 数据图表：可以配置 echart 图表。
9. 线条：有实线、虚线等，满足基本需求，样式可调。
10. 基本图形：有圆形、矩形等。
11. 装订线：其实就是线条的一种。
12. 业务组件：根据实际业务场景预设常用的业务模板组件，可以节省不少时间。
13. html ：一般不用，主要解决难题用的，遇到搞不定的模板别忘了还有它。

4. 功能示例

4.1 拖拽设计

4.2 队列批量打印

4.3 多面板设计打印

4.4 自定义函数打印

 

5. 集成方式

5.1 npm包集成

• 优点：可以自定义扩展组件，随心所欲设计自己的页面，不用写任何额外业务逻辑。
• 缺点：要求必须基于vue3+vite+elementplus+echarts框架，不支持Vue2和其它前端框架。

 5.1.1 表结构

不管哪种方式集成,如果要持久化,那必须准备一张数据表,格式如下

## 表结构,不管哪种方式集成,如果要持久化,那必须准备一张数据表,格式如下
{
    Id: '', //打印模板ID
    Title: '', //模板标题
    Number: '', //模板编号
    Desc: '', //模板描述
    DataApi: '', //数据接口
    PageObj: {} //页面json对象,存储自行转字符串
    PrintObj: {}, //动态打印对象,存储自行转字符串
  }

 5.1.2 图标库

npm install @element-plus/icons-vue

 5.1.3 全局注册图标

// main.js
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

  5.1.4 暗黑主题设置（打印不大适合）

// main.js 引用暗黑模式样式
import 'element-plus/theme-chalk/dark/css-vars.css'

 5.1.5 npm包依赖

# 页面设计引擎
npm i microi-printengine@latest

这里是所有的第三方依赖包，但不必全部安装第三方组件，npm 包内置了一些，只需依赖如下即可。

   // 我打包时排除了这些，所以你们集成时必须要有这些依赖包
      external: [
        'vue',
        'axios',
        'echarts',
        'element-plus',
        '@element-plus/icons-vue',
        'pinia',
        'sass',
        'sass-loader',
        'vue-router',
        'jquery',
      ],

 5.1.6 完整demo

到这里基本前置条件就配置完成了，下面只需新建一个 vue 页面，参考下面代码就能跑起来了，是不是很简单。

<template>
  <!-- 打印设计器 -->
  <printDesigner :remoteObj="remoteObj" />
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue'

import { printDesigner, EventBus, usePrintEngineStore } from 'microi-printengine'
import 'microi-printengine/style.css'

// import printDesigner from '@/components/print-designer.vue'
// import { EventBus } from '@/utils/eventBus'
// import { usePrintEngineStore } from '@/stores/printEngine'

import { createPinia } from 'pinia'

//状态机传参,npm包没包把pinia打包进去,正所谓巧妇难为无米之炊,给她传一个完事
const pinia = createPinia()
const printEngineStore = usePrintEngineStore(pinia)

//传入数据,这个数据不知道什么格式,可以在设计器拖拽几个组件查看下页面JSON ,和渲染JSON一毛一样的
const remoteObj = ref({})

//模拟测试数据
remoteObj.value = {
  Id: '001',
  Title: '测试打印模板',
  Number: '001',
  Desc: '这是一个初始的默认测试模板,你应该按照这个格式建表',
  DataApi: '',
  PageObj: {},
  PrintObj: {},
}

onMounted(() => {
  //如果需要token,设置token,该token一经接收即刻存入pinia状态机,每次调用接口通过拦截器自动处理token头,无需每次手动写,持久化用的localStorage ,可以F12查看
  printEngineStore.setToken('print_token')

  //监听保存页面JSON事件
  EventBus.on('savePrintJson', (savePrintJson) => {
    console.log('监听到了savePrintJson', savePrintJson)
  })
})

//销毁
onBeforeUnmount(() => {
  EventBus.off('savePrintJson')
})
</script>

<style scoped>
.dark {
  background: #252525;
  color: white;
}

.light {
  background-color: white;
  color: black;
}
</style>

5.2 iframe外挂形式集成

任何前端框架都可以集成，这种模式说白了就是百搭，它是无状态的,不依赖任何前端和后端,高内聚低耦合,可集成任意平台。

• 优点：可以对接任何平台，无状态，无侵染，零耦合，方便快捷。
• 缺点：只能使用内置组件，不能自定义组件。

5.2.1 核心原理

平台集成使用 frame ，把页面设计器嵌入到自己页面中,通过 postMessage 方式与父页面进行通信,父页面可以获取到设计器生成的页面 JSON ,也可以把 token 传给设计器。

5.2.2 完整demo

### Vue3组合式 集成demo

<template>
  <div v-loading="loading" class="iframe-container">
    <iframe
      ref="myIframe"
      id="iframe"
      :src="src"
      frameborder="0"
      width="100%"
      height="730px"
      @load="onIframeLoad"
    ></iframe>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
const loading = ref(true)
const src = ref('https://www.nbweixin.cn/autoprint')

const myIframe = ref(null)

//打印引擎模拟数据库数据
const demoObj = {
  Id: '001',
  Title: '测试打印模板',
  Number: '001',
  Desc: '这是一个初始的默认测试模板,你应该按照这个格式建表',
  DataApi: '',
  PageObj: {},
  PrintObj: {},
}

// 监听 iframe 是否加载完成
const onIframeLoad = () => {
  console.log('Iframe 已加载完成')
  loading.value = false
  sendMessageToIframe()
}

const sendMessageToIframe = () => {
  // 要发送的数据
  const dataToSend = {
    iframeToken: 'token_iframetest',
    iframeFormData: JSON.stringify(demoObj),
  }
  // 使用 postMessage 发送数据给 iframe
  myIframe.value.contentWindow.postMessage(dataToSend, '*')
}

//监听iframe 内部透传事件
let printengineEvent = null
printengineEvent = function (event) {
  if (event.data) {
    switch (event.data.key) {
      //保存页面json
      case 'savePrintJson':
        let obj = JSON.parse(event.data.value)
        console.log('收到的值', obj)
        break
      default:
        break
    }
  }
}
window.addEventListener('message', printengineEvent)
onMounted(() => {})

onBeforeUnmount(() => {
  window.removeEventListener('message', printengineEvent)
})
</script>

<style lang="scss" scoped></style>

6. 推广

好了，到这里已经介绍完了，至于自定义组件下篇再介绍。另外打个广告，目前我是吾码合伙人，如果想购买 Microi吾码 开源框架会员版，可以报我的CSDN 名 “三天不学习” 或者 报我的姓名“李赛赛” 即可享受减免优惠。

演示地址：Microi.Net-动态打印引擎

吾码CSDN：开源低代码平台-Microi吾码-成为合伙人-CSDN博客