Microi吾码Print Engine
Preview
Print 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
Trial Address
Microi code printing 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
{
Id: '', //打印模板ID
Title: '', //模板标题
Number: '', //模板编号
Desc: '', //模板描述
DataApi: '', //数据接口
PageObj: {} //页面json对象,存储自行转字符串
PrintObj: {}, //动态打印对象,存储自行转字符串
}npm component integration mode
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
must be a Vue3 Vite project, any page can be integrated, the following code is integrated demo
<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>integration mode of iframe mode
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 integrate 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
//设计引擎调用
<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
<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>