print-design v1.0.5

打印模板插件

• vue3 demo

http://git.ppst.top/pp/vue3-print-design

安装

pnpm install  print-design

使用

import {  
hiprint,
defaultElementTypeProvider,
defaultPaperTypes,
defaultPanels,
getSubTabulationConfig,
defaultFontList 
} from "print-design";
//  hiprint

属性方法

hiprint

web 打印的js组件

defaultElementTypeProvider()

• 默认属性组件([])

• 参数：数组

• 传入子表参数，可以显示多个子表组件

defaultFontList()

• 默认字体列表数据

• 返回数组

return [
		{ title: "微软雅黑", value: "Microsoft YaHei" },
		{ title: "黑体", value: "STHeitiSC-Light" },
		{ title: "思源黑体", value: "SourceHanSansCN-Normal" },
		{ title: "王羲之书法体", value: "王羲之书法体" },
		{ title: "宋体", value: "SimSun" },
		{ title: "华为楷体", value: "STKaiti" },
		{ title: "cursive", value: "cursive" },
	]

defaultPaperTypes()

• 默认纸张

• 返回属性

return {
		A3: {
			width: 420,
			height: 296.6,
		},
		A4: {
			width: 210,
			height: 296.6,
		},
		A5: {
			width: 210,
			height: 147.6,
		},
		B3: {
			width: 500,
			height: 352.6,
		},
		B4: {
			width: 250,
			height: 352.6,
		},
		B5: {
			width: 250,
			height: 175.6,
		},
	};

defaultPanels()

返回默认面板属性

return {
		panels: [
			{
				index: 0,
				name: 1,
				height: 297,
				width: 210,
				paperHeader: 49.5,
				paperFooter: 780,
				printElements: [],
				paperNumberLeft: 565.5,
				paperNumberTop: 819,
				watermarkOptions: {},
			},
		],
	}

getSubTabulationConfig(tid, title, tableName, fields, columns)

根据传参返回子表配置(tid, title, tableName, fields, columns)

• tid 对应 左侧菜单tid

• title 左侧菜单显示名称

• tableName 名称

• fields 子表下拉可选值 数组

• columns 子表列数据

方法： setFieldsLocalStorage

设置api主表数据

//  主表数据mainFields
hiprint.PrintElementTypeManager.setFieldsLocalStorage(mainFields);

方法 setDefaultLogoLocalStorage

设置图片默认地址

 hiprint.PrintElementTypeManager.setDefaultLogoLocalStorage(
        url
      );

方法： setPreviewContentDesign

预览

// 参数： id,打印模板，api数据
hiprint.PrintElementTypeManager.setPreviewContentDesign('preview_content_design',hiprintTemplate,printApiData);

方法: clickRightPropertyBox

点击展示打印模板属性面板

// 点击展示打印模板属性面板
hiprint.PrintElementTypeManager.clickRightPropertyBox();