Title: 🖨Printing engine
Canonical: https://microi.net/en/doc/system-engine/print-engine.html
Page-Modified: 2026-10-12T10:49:46.000Z
Source: published HTML document body; page revision is not a capability verification date.

# 🖨Printing engine

Create print templates online to support multiple print scenarios

---

## 📸Preview image

[打印引擎预览: https://file.microi.net/upload/img/csdn/6da046aeb97348f38412c01f51ee4e00.png#pic_center]

[在这里插入图片描述: https://file.microi.net/upload/img/csdn/4e9f38b6897c4f258f3ca28a2b6534be.png#pic_center]

## Printing engine

- before, my code platform has supported the local production of word export print templates, but it cannot be produced online, and word files need to be exported to the local before printing, because my code print engine was born.

- All controls support data source configuration, which can be provided through interface engine (https://microi.blog.csdn.net/article/details/143968454)

## Trial Address

Microi code printing engine:https://microi.net/print-engine (https://microi.net/print-engine)

Table structure, no matter which way to integrate, if you want to persist, you must prepare a data table, the format is as follows

json

```
{
    Id: '', //打印模板ID
    Title: '', //模板标题
    Number: '', //模板编号
    Desc: '', //模板描述
    DataApi: '', //数据接口
    PageObj: {} //页面json对象,存储自行转字符串
    PrintObj: {}, //动态打印对象,存储自行转字符串
}
```

## npm package integration method

super simple, a Vue page is done, it is impossible to find out the page, even the route does not use the App page, it can be integrated into the project through components, it will not pollute the project, and the upgrade and expansion are independent, focusing on one that does not interfere with each other, and the distance produces beauty.

npm I microi-printengine@latest

It must be a Vue 3 Vite project. You can integrate it into any page. The following code is an integration demo.

Expand to view JavaScript code (56 lines)

javascript

```
<template>
  <!-- 打印设计器 -->
  <printDesigner :remoteObj="remoteObj" />
</template>
<script setup>
  
//引入组件
import { printDesigner, EventBus, usePrintEngineStore } from 'microi-printengine' 
//引入样式
import 'microi-printengine/style.css' 

//本地组件
import { createPinia } from 'pinia'
import { onMounted, onBeforeUnmount, ref } from 'vue'


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

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

//模拟加载远程数据
const loadFormData = () => {}

onMounted(() => {
  
  //如果需要token,设置token,该token一经接收即刻存入pinia状态机,每次调用接口通过拦截器自动处理token头,无需每次手动写,持久化用的localStorage ,可以F12查看
  printEngineStore.setToken('')
  
  //下面这一大串监听,其实也可以写到一个事件里,通过key value 键值对来区分,暂时先这么着吧
  
  //监听保存页面JSON事件
  EventBus.on('savePrintJson', (savePrintJson) => {
    console.log('savePrintJson', savePrintJson)
  })

})

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

<style>
.dark {
  background: #252525;
  color: white;
}
.light {
  background-color: white;
  color: black;
}
</style>
```

## IFrame integration method

this mode, to put it bluntly, is versatile. it regards the low-code designer as an online tool. it is stateless, does not rely on any front-end and back-end, has high cohesion and low coupling, and can be integrated into any platform. When there are hundreds of custom extension components in time, you can become the overlord and independent product on your own. Platform integration uses Iframe to embed the page designer into your own page and communicate with the parent page through postMessage means. The parent page can obtain the page JSON generated by the designer or pass token to the designer.

Data communication using postMessage the parent page (docking platform) sends data to the child page through the postMessage, where token is mainly passed, and the child page (page design engine component) uses window.addEventListener to monitor and receive data

javascript

```
//设计引擎调用
<template>
<iframe ref="myIframe" id="iframe" src="https://www.nbweixin.cn/autoprint/"  frameborder="0" style="width: 100%; height: 100%"></iframe>
</template>
methods: {
 sendMessageToIframe() {
      const iframe = this.$refs.myIframe;
      // 要发送的数据
      const dataToSend = {
        printEngineToken: "token 值"
      };
      // 使用 postMessage 发送数据给 iframe
      iframe.contentWindow.postMessage(dataToSend, "*");
  }
 }
```

## Vue3 combined integrated demo

Expand to view the JavaScript code (107 lines)

javascript

```
<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: {
    panels: [
      {
        index: 0,
        name: 1,
        paperType: 'A4',
        height: 297,
        width: 210,
        paperHeader: 0,
        paperFooter: 841.8897637795277,
        printElements: [
          {
            options: {
              left: 351,
              top: 100.5,
              height: 9.75,
              width: 120,
              field: 'keytext_01',
              testData: '当你看到我的时候,就表示你成功了',
              title: '传参测试',
              qid: 'keytext',
            },
            printElementType: {
              title: '键值文本',
              type: 'text',
            },
          },
        ],
        paperNumberContinue: true,
        watermarkOptions: {},
        panelLayoutOptions: {},
      },
    ],
  },
  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':
        console.log('已接到到来自iframe消息,savePrintJson', event.data.value)
        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>
```