| kr | 您所在的位置：网站首页 › 早餐券模板打印怎么打 › kr |
|
一个基于 Vue、ElementUi、Lodop 的打印模板设计器。实现打印模板的设计、预览和打印功能。 kr-print-designer 简介一个基于 Vue、ElementUi、C-Lodop 的打印模板设计器。实现打印模板的设计、预览和打印功能。示例 安装Vue 项目中引用该组件 npm install kr-print-designer打印功能基于 C-Lodop 打印控件，需前往下载 引入main.js import Vue from "vue"; import KrPrintDesigner from "kr-print-designer"; import "kr-print-designer/lib/kr-print-designer.css"; Vue.use(KrPrintDesigner);demo.vue lodop 打印/预览及设置 lodop 注册信息方法使用 // 直接打印 this.$lodop.print(temp, data); // 预览打印内容 this.$lodop.preview(temp, data); // 预览打印模板 this.$lodop.previewTemp(temp); // 设置Lodop产品注册信息 this.$lodop.setLicenses(licenseInfo); Attributes 参数说明类型默认值tempValue模板对象Object;widgetOptions模板设计选项配置Array[] tempValue 参数详解 参数示例： { title: 'demo', width: 750, height: 550, pageWidth: 750, pageHeight: 550, tempItems: [], } 参数说明：tempValue 为打印模板对象， 对象中参数具体解析如下： tempValue: 参数说明类型可选值默认值title模板名称String————width模板宽度Number——750height模板高度Number——550pageWidth模板纸张宽度（mm）Number——750pageHeight模板纸张高度（mm）Number——550tempItems模板打印项内容Array——[] widgetOptions 参数详解 参数示例： [ { type: "braid-txt", isEdit: true, title: "自定义文本", value: "自定义文本", defaultValue: "自定义文本" }, { type: "braid-txt", isEdit: false, title: "公司名称", value: "{公司名称}", defaultValue: "九州科瑞", name: "companyName" }, { type: "bar-code", title: "订单编号（条码）", value: "{orderNumber}", defaultValue: "1234567890", name: "orderNumber" }, { type: "braid-html", title: "分页", value: "{第##页/共##页}", defaultValue: "第##页/共##页" }, { type: "braid-image", title: "logo", value: "http://192.168.7.229/syy/file/files/view/5f9fb42dabebb4049ffbd019" }, { type: "braid-table", title: "商品明细", name: "details", value: "{details}", defaultValue: [ { productName: "苹果ipone11pro", skuName: "iphone11pro256g", specModel: "165L", quantity: 3, price: "12.00" }, { productName: "苹果ipone11pro", skuName: "iphone11pro124g", specModel: "165L", quantity: 3, price: "12.00" } ], columnsAttr: [ { title: "产品名称", value: "{产品名称}", name: "productName" }, { title: "sku名称", value: "{sku名称}", name: "skuName" }, { title: "规格型号", value: "{规格型号}", name: "specModel" }, { title: "数量", value: "{数量}", name: "quantity" }, { title: "单价", value: "{单价}", name: "price" } ] } ]; 参数说明：widgetOptions 为设计打印模板的打印项配置， 打印项有多种类型，各种打印项参数具体解析如下： braid-txt Attributes: 参数说明类型可选值默认值type模板类型Stringbraid-txt / braid-table / braid-html / braid-image / bar-code——isEdit是否可编辑Booleantrue / false——dragable是否可拖拽Booleantrue / falsetrueresizable尺寸是否可变Booleantrue / falsetruewidth打印项宽度（px）Number——120height打印项高度（px）Number——60left左偏移量（px）Number——50top上偏移量（px）Number——0title打印项名称String————value打印项内容String————defaultValue打印项默认内容String————name动态打印项数据名称（对应打印数据 key-name）String——''style打印项样式Object——{} Style: 参数说明类型可选值默认值zIndex层级Number——0FontSize字体大小（pt）Number——9FontColor字体颜色String——"#000000"Bold字体是否加粗Booleantrue / false（是 / 否）falseItalic字体是否设置斜体Booleantrue / false（是 / 否）falseUnderline字体是否设置下划线Booleantrue / false（是 / 否）falseAlignment文字对齐方式String"left" / "center" / "right"（左靠齐 / 居中/ 右靠齐）leftItemType打印项类型Number0 / 1 / 2 / 3 / 4（普通项 / 页眉页脚/ 页号项/ 页数项/ 多页项）0 braid-image Attributes: 参数说明类型可选值默认值type模板类型Stringbraid-txt / braid-table / braid-html / braid-image / bar-code——isEdit是否可编辑Booleantrue / falsefalsedragable是否可拖拽Booleantrue / falsetrueresizable尺寸是否可变Booleantrue / falsetruewidth打印项宽度（px）Number——120height打印项高度（px）Number——60left左偏移量（px）Number——50top上偏移量（px）Number——0title打印项名称String————value图片路劲String————defaultValue图片默认路劲String————name动态打印项数据名称（对应打印数据 key-name）String——''style打印项样式Object——{} Style: 参数说明类型可选值默认值zIndex层级Number——0ItemType打印项类型Number0 / 1 / 2 / 3 / 4（普通项 / 页眉页脚/ 页号项/ 页数项/ 多页项）0 braid-html Attributes: 参数说明类型可选值默认值type模板类型Stringbraid-txt / braid-table / braid-html / braid-image / bar-code——isEdit是否可编辑Booleantrue / falsefalsedragable是否可拖拽Booleantrue / falsetrueresizable尺寸是否可变Booleantrue / falsetruewidth打印项宽度（px）Number——120height打印项高度（px）Number——60left左偏移量（px）Number——50top上偏移量（px）Number——0title打印项名称String——"html"valuehtml 内容String——"html'"defaultValue默认 htmlString——"html"name动态打印项数据名称（对应打印数据 key-name）String——''style打印项样式Object——{} Style: 参数说明类型可选值默认值zIndex层级Number——0ItemType打印项类型Number0 / 1 / 2 / 3 / 4（普通项 / 页眉页脚/ 页号项/ 页数项/ 多页项）0AutoHeight是否设置自动高度Booleantrue / false（是 / 否）0BottomMargin打印项距离纸张的下边距（mm）Number——0 braid-html Attributes: 参数说明类型可选值默认值type模板类型Stringbraid-txt / braid-table / braid-html / braid-image / bar-code——isEdit是否可编辑Booleantrue / falsefalsedragable是否可拖拽Booleantrue / falsetrueresizable尺寸是否可变Booleantrue / falsetruewidth打印项宽度（px）Number——240height打印项高度（px）Number——60left左偏移量（px）Number——50top上偏移量（px）Number——10title打印项名称String——"表格"value表格数据Array——[]defaultValue表格默认数据Array——[]columnsAttr表格可选列配置Array——[]name动态打印项数据名称（对应打印数据 key-name）String——''style打印项样式Object——{} Style: 参数说明类型可选值默认值zIndex层级Number——0FontSize字体大小（pt）Number——9FontColor字体颜色String——"#000000"BorderColor边框颜色String——"#000000"Alignment文字对齐方式String"left" / "center" / "right"（左靠齐 / 居中/ 右靠齐）1AutoHeight是否设置自动高度Booleantrue / false（是 / 否）0BottomMargin打印项距离纸张的下边距（mm）Number——0 columnsAttr: 参数说明类型可选值默认值title表格列名称String————value表格列数据String————name动态打印项数据名称（对应打印数据 key-name）String———— bar-code Attributes: 参数说明类型可选值默认值type模板类型Stringbraid-txt / braid-table / braid-html / braid-image / bar-code——isEdit是否可编辑Booleantrue / falsefalsedragable是否可拖拽Booleantrue / falsetrueresizable尺寸是否可变Booleantrue / falsetruewidth打印项宽度（px）Number——120height打印项高度（px）Number——60left左偏移量（px）Number——50top上偏移量（px）Number——0title打印项名称String——"条码"valuehtml 内容String——"1234567890"defaultValue默认 htmlString——"1234567890"name动态打印项数据名称（对应打印数据 key-name）String——''style打印项样式Object——{} Style: 参数说明类型可选值默认值zIndex层级Number——0FontSize字体大小（pt）Number——falseShowBarText是否显示条码值Booleanfalse / true（不显示 / 显示）0codeType条码类型Number'128A' / '128B' / '128C' / '128Auto' / 'EAN8' / 'EAN13' / 'EAN128A' / 'EAN128B' / 'EAN128C' / 'Code39' / '39Extended' / '2_5interleaved' / '2_5industrial' / '2_5matrix' / 'UPC_A' / 'UPC_E0' / 'UPC_E1' / 'UPCsupp2' / 'UPCsupp5' / 'Code93' / '93Extended' / 'MSI' / 'PostNet' / 'Codabar'"Code39"ItemType打印项类型Number0 / 1 / 2 / 3 / 4（普通项 / 页眉页脚/ 页号项/ 页数项/ 多页项）0 Events 事件名称说明回调参数save点击保存时触发设计后的模板对象 Methods 事件名称说明回调参数print对数据和模板解析，实现打印Function(temp: object, data:array)preview对数据和模板解析，实现打印内容的预览Function(temp: object, data:array)previewTemp对模板进行预览Function(temp: object )setLicenses设置 Lodop 软件产品注册信息Function(licenseInfo: object ) setLicenses 方法详解 回调示例： let licenseInfo = { strCompanyName: "某某某公司", strLicense: "******", strLicenseA: "", strLicenseB: "" }; // 设置Lodop产品注册信息 this.$lodop.setLicenses(licenseInfo); licenseInfo 对象值说明：licenseInfo 为 Lodop 打印软件产品注册信息， 对象中参数具体解析如下： 值说明类型可选值默认值strCompanyName注册单位名称String————strLicense主注册号String————strLicenseA附加注册号 AString————strLicenseB附加注册号 BString———— |
| CopyRight 2018-2019 实验室设备网 版权所有 |