vue3-print-design

vue3-print-design 打印模板设计器组件

全局注册

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import "../node_modules/vue3-print-design/style.css"; //引入组件样式
import Vue3PrintDesign from "vue3-print-design"; //引入下载后的组件
async function bootstrap() {
  const app = createApp(App);
  app.use(Vue3PrintDesign); //注册
  app.mount('#app');
}

bootstrap();

使用

<PrintDesign :printApiData="{title:'aaaa',table1:[{title:'bbb',value1:'ccc'}]}"></PrintDesign>

局部使用

import "../node_modules/vue3-print-design/style.css"; //引入组件样式
import {PrintDesign} from "vue3-print-design"; //引入下载后的组件

使用

<PrintDesign :printApiData="{title:'aaaa',table1:[{title:'bbb',value1:'ccc'}]}"></PrintDesign>

printApiData 参数说明

let printApiData = {
  title:'aaaa',//主表数据
  table1:[{title:'bbb',value1:'ccc'}]}//子表数据

获取json配置数据

<PrintDesign ref="printDesign" :printApiData="{title:'aaaa',table1:[{title:'bbb',value1:'ccc'}]}"></PrintDesign>

const printDesign = ref();//组件ref
let json = printDesign.value.getJson();
// 返货json配置数据

传输json编辑打印模板

<PrintDesign ref="printDesign" :panel="panel"  :printApiData="{title:'aaaa',table1:[{title:'bbb',value1:'ccc'}]}"></PrintDesign>

const panel = {
		panels: [
			{
				index: 0,
				name: 1,
				height: 297,
				width: 210,
				paperHeader: 49.5,
				paperFooter: 780,
				printElements: [],//设计配置数组
				paperNumberLeft: 565.5,
				paperNumberTop: 819,
				watermarkOptions: {},
			},
		],
	}