lodop-print-designer(基于kr-print-designer) 只是为了方便我在vue项目中使用,所以以此命名。
由于kr-print-designer最后一次更新时间为2021年,因为我需要的一些功能原插件并没有,基于此我进行了二次开发。
一个基于 Vue2、ElementUi、C-Lodop 的打印模板设计器。实现打印模板的设计、预览和打印功能。示例
Vue 项目中引用该组件
npm install lodop-print-designer
打印功能基于 C-Lodop 打印控件,需前往下载
main.js
import Vue from "vue";
import LodopPrintDesigner from "lodop-print-designer";
import "lodop-print-designer/lib/lodop-print-designer.css";
Vue.use(LodopPrintDesigner);
demo.vue
<template>
<div id="app">
<lodop-print-designer
:temp-value="value"
:widget-options="widgets"
:lodop-license="licenseInfo"
@save="handleSave"
/>
</div>
</template>
lodop 打印/预览及设置 lodop 注册信息方法使用
// 直接打印
this.$lodop.print(temp, data, beforePrintMethod);
// 预览打印内容
this.$lodop.preview(temp, data);
// 预览打印模板
this.$lodop.previewTemp(temp);
// 设置Lodop产品注册信息
this.$lodop.setLicenses(licenseInfo);
// 获取打印机列表,可根据IP获取远程电脑上的打印机
ip参数为选填,默认为本机127.0.0.1
this.$lodop.getPrinters(ip).then(res=> {
console.log('打印机列表--->', res)
})
参数 |
说明 |
类型 |
默认值 |
tempValue |
模板对象 |
Object |
; |
widgetOptions |
模板设计选项配置 |
Array |
[] |
{
title: 'demo',
width: 750,
height: 550,
pageWidth: 750,
pageHeight: 550,
tempItems: [],
}
tempValue 为打印模板对象, 对象中参数具体解析如下:
参数 |
说明 |
类型 |
可选值 |
默认值 |
title |
模板名称 |
String |
—— |
—— |
width |
模板宽度 |
Number |
—— |
750 |
height |
模板高度 |
Number |
—— |
550 |
pageWidth |
模板纸张宽度(mm) |
Number |
—— |
750 |
pageHeight |
模板纸张高度(mm) |
Number |
—— |
550 |
tempItems |
模板打印项内容 |
Array |
—— |
[] |
[
{
type: "braid-txt",
isEdit: true,
title: "自定义文本",
value: "自定义文本",
defaultValue: "自定义文本"
},
{
type: "vertical-line",
title: "竖线",
name: ""
},
{
type: "horizontal-line",
title: "横线",
name: ""
},
{
type: "braid-txt",
title: "当前时间",
value: "{YYYY-MM-DD HH:mm:ss}",
defaultValue: '',
width: 150,
height: 20,
name: "_getNowTime"
},
{
type: "braid-txt",
isEdit: false,
title: "公司名称",
value: "{公司名称}",
defaultValue: "九州科瑞",
name: "companyName"
},
{
type: "bar-code",
title: "订单编号(条码)",
value: "{orderNumber}",
defaultValue: "1234567890",
name: "orderNumber"
lodopStyle: { QRCodeVersion: '1', QRCodeErrorLevel: 'L' },
},
{
type: "braid-html",
title: "分页",
value: "{第##页/共##页}",
defaultValue:
"<font ><span tdata='pageNO'>第##页</span>/<span tdata='pageCount'>共##页</span></font>"
},
{
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: "_seq"
},
{
title: "产品名称",
value: "{产品名称}",
name: "productName"
},
{
title: "sku名称",
value: "{sku名称}",
name: "skuName"
},
{
title: "规格型号",
value: "{规格型号}",
name: "specModel"
},
{
title: "数量",
value: "{数量}",
name: "quantity"
},
{
title: "单价",
value: "{单价}",
name: "price"
}
]
}
];
widgetOptions 为设计打印模板的打印项配置, 打印项有多种类型,各种打印项参数具体解析如下:
参数 |
说明 |
类型 |
可选值 |
默认值 |
type |
模板类型 |
String |
braid-txt / braid-table / braid-html / braid-image / bar-code / horizontal-line / vertical-line |
—— |
isEdit |
是否可编辑 |
Boolean |
true / false |
—— |
dragable |
是否可拖拽 |
Boolean |
true / false |
true |
resizable |
尺寸是否可变 |
Boolean |
true / false |
true |
width |
打印项宽度(px) |
Number |
—— |
120 |
height |
打印项高度(px) |
Number |
—— |
60 |
left |
左偏移量(px) |
Number |
—— |
50 |
top |
上偏移量(px) |
Number |
—— |
0 |
title |
打印项名称 |
String |
—— |
—— |
value |
打印项内容 |
String |
—— |
—— |
defaultValue |
打印项默认内容 |
String |
—— |
—— |
name |
动态打印项数据名称(对应打印数据 key-name) |
String |
支持路径嵌套 'a.b.c' |
'' |
lodopStyle |
LODOP 默认打印项样式 |
Object |
—— |
{} |
style |
打印项样式 |
Object |
—— |
{} |
参数 |
说明 |
类型 |
可选值 |
默认值 |
zIndex |
层级 |
Number |
—— |
0 |
FontSize |
字体大小(pt) |
Number |
—— |
9 |
FontColor |
字体颜色 |
String |
—— |
"#000000" |
Bold |
字体是否加粗 |
Boolean |
true / false(是 / 否) |
false |
Italic |
字体是否设置斜体 |
Boolean |
true / false(是 / 否) |
false |
Underline |
字体是否设置下划线 |
Boolean |
true / false(是 / 否) |
false |
Alignment |
文字对齐方式 |
String |
"left" / "center" / "right"(左靠齐 / 居中/ 右靠齐) |
left |
ItemType |
打印项类型 |
Number |
0 / 1 / 2 / 3 / 4(普通项 / 页眉页脚/ 页号项/ 页数项/ 多页项) |
0 |
参数 |
说明 |
类型 |
可选值 |
默认值 |
type |
模板类型 |
String |
braid-txt / braid-table / braid-html / braid-image / bar-code / horizontal-line / vertical-line |
—— |
isEdit |
是否可编辑 |
Boolean |
true / false |
false |
dragable |
是否可拖拽 |
Boolean |
true / false |
true |
resizable |
尺寸是否可变 |
Boolean |
true / false |
true |
width |
打印项宽度(px) |
Number |
—— |
120 |
height |
打印项高度(px) |
Number |
—— |
60 |
left |
左偏移量(px) |
Number |
—— |
50 |
top |
上偏移量(px) |
Number |
—— |
0 |
title |
打印项名称 |
String |
—— |
—— |
value |
图片路劲 |
String |
—— |
—— |
defaultValue |
图片默认路劲 |
String |
—— |
—— |
name |
动态打印项数据名称(对应打印数据 key-name) |
String |
—— |
'' |
lodopStyle |
LODOP 默认打印项样式 |
Object |
—— |
{} |
style |
打印项样式 |
Object |
—— |
{} |
参数 |
说明 |
类型 |
可选值 |
默认值 |
zIndex |
层级 |
Number |
—— |
0 |
ItemType |
打印项类型 |
Number |
0 / 1 / 2 / 3 / 4(普通项 / 页眉页脚/ 页号项/ 页数项/ 多页项) |
0 |
参数 |
说明 |
类型 |
可选值 |
默认值 |
type |
模板类型 |
String |
braid-txt / braid-table / braid-html / braid-image / bar-code / horizontal-line / vertical-line |
—— |
isEdit |
是否可编辑 |
Boolean |
true / false |
false |
dragable |
是否可拖拽 |
Boolean |
true / false |
true |
resizable |
尺寸是否可变 |
Boolean |
true / false |
true |
width |
打印项宽度(px) |
Number |
—— |
120 |
height |
打印项高度(px) |
Number |
—— |
60 |
left |
左偏移量(px) |
Number |
—— |
50 |
top |
上偏移量(px) |
Number |
—— |
0 |
title |
打印项名称 |
String |
—— |
"html" |
value |
html 内容 |
String |
—— |
"
|
defaultValue |
默认 html |
String |
—— |
"
|
name |
动态打印项数据名称(对应打印数据 key-name) |
String |
—— |
'' |
lodopStyle |
LODOP 默认打印项样式 |
Object |
—— |
{} |
style |
打印项样式 |
Object |
—— |
{} |
参数 |
说明 |
类型 |
可选值 |
默认值 |
zIndex |
层级 |
Number |
—— |
0 |
ItemType |
打印项类型 |
Number |
0 / 1 / 2 / 3 / 4(普通项 / 页眉页脚/ 页号项/ 页数项/ 多页项) |
0 |
AutoHeight |
是否设置自动高度 |
Boolean |
true / false(是 / 否) |
0 |
BottomMargin |
打印项距离纸张的下边距(mm) |
Number |
—— |
0 |
参数 |
说明 |
类型 |
可选值 |
默认值 |
type |
模板类型 |
String |
braid-txt / braid-table / braid-html / braid-image / bar-code / horizontal-line / vertical-line |
—— |
isEdit |
是否可编辑 |
Boolean |
true / false |
false |
dragable |
是否可拖拽 |
Boolean |
true / false |
true |
resizable |
尺寸是否可变 |
Boolean |
true / false |
true |
width |
打印项宽度(px) |
Number |
—— |
240 |
height |
打印项高度(px) |
Number |
—— |
60 |
left |
左偏移量(px) |
Number |
—— |
50 |
top |
上偏移量(px) |
Number |
—— |
10 |
title |
打印项名称 |
String |
—— |
"表格" |
value |
表格数据 |
Array |
—— |
[] |
defaultValue |
表格默认数据 |
Array |
—— |
[] |
columnsAttr |
表格可选列配置 |
Array |
—— |
[] |
name |
动态打印项数据名称(对应打印数据 key-name) |
String |
—— |
'' |
lodopStyle |
LODOP 默认打印项样式 |
Object |
—— |
{} |
style |
打印项样式 |
Object |
—— |
{} |
参数 |
说明 |
类型 |
可选值 |
默认值 |
zIndex |
层级 |
Number |
—— |
0 |
FontSize |
字体大小(pt) |
Number |
—— |
9 |
FontColor |
字体颜色 |
String |
—— |
"#000000" |
BorderColor |
边框颜色 |
String |
—— |
"#000000" |
Alignment |
文字对齐方式 |
String |
"left" / "center" / "right"(左靠齐 / 居中/ 右靠齐) |
1 |
AutoHeight |
是否设置自动高度 |
Boolean |
true / false(是 / 否) |
0 |
BottomMargin |
打印项距离纸张的下边距(mm) |
Number |
—— |
0 |
参数 |
说明 |
类型 |
可选值 |
默认值 |
title |
表格列名称 |
String |
—— |
—— |
value |
表格列数据 |
String |
—— |
—— |
name |
动态打印项数据名称(对应打印数据 key-name) |
String |
—— |
—— |
参数 |
说明 |
类型 |
可选值 |
默认值 |
type |
模板类型 |
String |
braid-txt / braid-table / braid-html / braid-image / bar-code / horizontal-line / vertical-line |
—— |
isEdit |
是否可编辑 |
Boolean |
true / false |
false |
dragable |
是否可拖拽 |
Boolean |
true / false |
true |
resizable |
尺寸是否可变 |
Boolean |
true / false |
true |
width |
打印项宽度(px) |
Number |
—— |
120 |
height |
打印项高度(px) |
Number |
—— |
60 |
left |
左偏移量(px) |
Number |
—— |
50 |
top |
上偏移量(px) |
Number |
—— |
0 |
title |
打印项名称 |
String |
—— |
"条码" |
value |
html 内容 |
String |
—— |
"1234567890" |
defaultValue |
默认 html |
String |
—— |
"1234567890" |
name |
动态打印项数据名称(对应打印数据 key-name) |
String |
—— |
'' |
lodopStyle |
LODOP 默认打印项样式 |
Object |
—— |
{} |
style |
打印项样式 |
Object |
—— |
{} |
参数 |
说明 |
类型 |
可选值 |
默认值 |
zIndex |
层级 |
Number |
—— |
0 |
FontSize |
字体大小(pt) |
Number |
—— |
false |
ShowBarText |
是否显示条码值 |
Boolean |
false / true(不显示 / 显示) |
0 |
codeType |
条码类型 |
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'/ 'QRCode'/ 'PDF417' |
"Code39" |
ItemType |
打印项类型 |
Number |
0 / 1 / 2 / 3 / 4(普通项 / 页眉页脚/ 页号项/ 页数项/ 多页项) |
0 |
事件名称 |
说明 |
回调参数 |
save |
点击保存时触发 |
设计后的模板对象 |
方法名称 |
说明 |
参数 |
initTemp |
手动初始化模板数据 |
Function(tempValue: object, widgetOptions:widgetOptions) |
名称 |
说明 |
参数 |
print |
对数据和模板解析,实现打印,打印之前会执回调函数 |
Function(temp: object, data:array, beforePrintMethod:Function) |
preview |
对数据和模板解析,实现打印内容的预览 |
Function(temp: object, data:array) |
previewTemp |
对模板进行预览 |
Function(temp: object ) |
setLicenses |
设置 Lodop 软件产品注册信息 |
Function(licenseInfo: object ) |
getPrinters |
获取 当前/远程 电脑打印机列表,返回object |
127.0.0.1 |
let licenseInfo = {
strCompanyName: "某某某公司",
strLicense: "******",
strLicenseA: "",
strLicenseB: ""
};
// 设置Lodop产品注册信息
this.$lodop.setLicenses(licenseInfo);
licenseInfo 为 Lodop 打印软件产品注册信息, 对象中参数具体解析如下:
值 |
说明 |
类型 |
可选值 |
默认值 |
strCompanyName |
注册单位名称 |
String |
—— |
—— |
strLicense |
主注册号 |
String |
—— |
—— |
strLicenseA |
附加注册号 A |
String |
—— |
—— |
strLicenseB |
附加注册号 B |
String |
—— |
—— |