# Lodop打印设计器
# 概述
Lodop设计器是基于Lodop打印插件开发的。使用者可以在设计器上拖拽出想要打印的页面，在功能模块调用封装好的打印方法即可实现打印功能。 用户在使用Lodop打印时需要安装Lodop打印控件依赖文件（可以在官网免费下载，如需商用请自行购买）。
# Lodop打印模板配置说明
创建或编辑打印模板时类型选择lodop，点击保存并设计，或者在模板列表选择想要设计的lodop模板点击右侧操作栏中设计按钮即可进入lodop的设计页面。
# 打印逻辑
- 1.设计好打印模板。
- 2.前端调用公共打印方法，需要将打印模板code、按照打印参数配置格式的数据传入方法。
- 3.后端按照按照打印参数配置和数据集的映射关系调用数据集配置的接口取得数据。
- 4.前端按照模板设计将数据集返回的数据渲染出来，实现预览和打印功能。
名词解释：
- 打印参数配置：调用公共打印方法传入得数据结构，需要包含数据集中需要的全部数据
- 数据集：打印数据的源，现在支持本地接口方式
# 配置打印参数
点击【打印参数】-【配置打印参数】即可配置打印参数。
按照前端数据格式配置好打印参数。 注意：字段只有是Object和Array时可以创建子集。当Array子集为对象时，应按照Array->Object->对象属性这种层级配置。
配置打印参数点击保存按钮就可以在打印参数栏看到刚才配置的数据。
# 配置数据集
点击【数据集】-【新增数据集】即可添加数据集，暂时只支持本地接口数据集。
# 本地接口数据集
本地接口数据集是指在打印获取时调用系统本地接口获取数据的方式。在使用本地接口数据集是需要配置数据字典中的server-info-config字典项。
参数说明
- scheme：协议，可以配置http或https
- host：服务主机，本服务的ip地址或者域名
- port：服务端口号
- context-path：后端服务配置的server.servlet.context-path,如果后端未配置server.servlet.context-path则context-path不用配置
点击左侧栏中的【数据集】-【新增数据集】-【本地接口数据】即可配置本地接口。
注意
- 如果接口需要登录认证时，需要在请求头中添加参数字段为access-token，参数类型为动态值，参数值为accessToken的配置。
- 如果接口需要配置国际化时，需要在请求头中添加参数字段为language，参数类型为动态值，参数值为国际化语言的配置。
- 接口配置信息说明
| 属性 | 说明 |
|---|---|
| 编码 | 本地接口数据集的编码 |
| 名称 | 本地接口数据集的名称 |
| 接口地址 | 调用接口的路径 |
| 请求方式 | 调用接口请求方式 |
| 请求参数 | 请求参数包含请求头、params参数、请求体、form-url参数。当请求方式为post，显示请求头、请求体、form-url参数；方式为get，显示请求头、params参数。 |
| 返回参数 | 返回参数的结构维护。 |
| 示例数据 | 示例数据。 |
注意
form-url参数：指当请求方式为post并且body参数为空时，默认接口入参类型为x-www-form-urlencoded（键值对形式）的请求方式。
请求体：指body参数的层级结构
- 请求参数类型说明
| 参数类型 | 说明 |
|---|---|
| 动态值 | 将打印过程中的参数赋值给参数字段。支持当前人账号ID、业务单元ID、岗位ID、AccessToken等 |
| 映射值 | 将打印过程中前端传入的参数赋值给参数字段。 |
| 固定值 | 打印过程中将配置的参数值赋值给参数字段。 |
- 返回参数数据展示说明
数据展示指的是将选中节点以及其子节点的数据作为此数据源的数据，当配置组件数据源时只能选择勾选节点和其子节点。
注意：如果不勾选子节点，默认为根节点。
- 数据集展示
当配置好数据集后，在左侧栏中数据集选项中就可以预览数据集的结构。
# 设计页面
Lodop打印设计器支持文本、图片、条形码、二维码、表格、套打表格、辅助功能等组件。只需要将组件拖动至画布中，选择组件的数据设置、样式设置等配置 即可完成Lodop打印模板的设计。
# 页面属性说明
点击页面空白部分右侧栏则显示出页面属性配置。
| 属性 | 说明 |
|---|---|
| 配置打印机 | 可手动输入打印机的名称，打印时会根据所输入的打印机名称模糊匹配（不区分大小写）当前系统可以获取的所有打印机，如果无法匹配则使用系统默认的打印机 |
| 纸张 | 配置打印纸张规格，可以自定义，也可以选择通用规格A3、A4、A5等 |
| 宽度 | 纸张的宽度，当纸张规格为自定义时可以配置 |
| 高度 | 纸张的高度，当纸张规格为自定义时可以配置 |
| 显示页眉 | 配置画布是否显示页眉 |
| 显示页脚 | 配置画布是否显示页脚 |
| 左偏移 | 配置页面向左偏移距离 |
| 顶部偏移 | 配置页面向顶部偏移距离 |
| 纸张方向 | 配置模板打印时纸张的方向，包含横向、纵向及纵向且即打即停 |
| 显示页码 | 配置页面是否显示页码 |
| 水印开关 | 配置页面是否显示水印，以下水印配置仅当开关开启时有效 |
| 水印内容 | 配置水印内容 |
| 字体颜色 | 配置水印字体颜色 |
| 字体大小 | 配置水印字体大小 |
| 旋转角度 | 配置水印内容旋转角度 |
| 水平密度 | 配置水平密度 |
| 垂直密度 | 配置垂直密度 |
| 水印时间 | 配置水印时间 |
| 时间格式 | 配置时间格式 |
注意
组件元素设计在页眉页脚上，则代表该组件会在每页的页眉页脚上打印。
# 文本
文本组件的使用只需从左侧组件栏将文本拖动到画布合适的位置，并设置文本组件的【数据设置】即可。如需修改文本组件样式等可以选中文本组件，在右边栏修改。
# 数据设置
数据设弹窗中可以通过表达式、数据集以及打印入参三种方式定义文本组件的数据源，第一种表达式需要用户手动输入需要展示的静态内容，输入的内容即是打印中的内容。
第二种设置数据的方式是数据集，选择数据集页签后，页面内会展示设计页面中左侧数据集设置的数据，数据是树状机构的，且使用者只可以选择最底层的节点作为展示的数据。 选中后关闭数据设置弹窗，模板中刚刚设置的文本控件中会展示刚刚选中的数据节点，每一级节点通过.分割展示，当预览或者打印时会获取所设置的数据集的数据展示在打印内容中。
第三种设置数据的方式是打印入参，选择打印入参页签后，页面内会展示设计页面中左侧打印入参页签内配置打印入参配置的数据，数据结构与数据集配置数据结构一致，只有最下级可以选择。 选中后展示的内容与数据集配置数据结构一致，最终预览或打印时展示的是在配置打印入参时，示例数据内填写的数据。
# 属性配置说明
| 属性 | 说明 |
|---|---|
| 数据设置 | 配置该文本的数据源，可以配置表达式（暂只支持静态数据）和数据集（数据集返回的数据） |
| 动态行高 | 配置自动调节行高 |
| 隐藏零 | 文本内容为0时隐藏 |
| 转大小写 | 将文本的数据转化为配置的金额格 |
| 打印在 | 配置内容在哪一页打印(默认、仅第一页、仅最后一页、仅奇数页、仅偶数页) |
| 位置坐标 | 配置该组件在画布中的位 |
| 宽高大小 | 配置该组件的宽度和高 |
| 隐藏规则 | 配置文本隐藏位置(例如：首页、尾页) |
| 显示规则 | 配置文本显示位置(例如：首页、尾页、始终隐藏，奇数页、偶数页) |
# 样式配置说明
| 属性 | 说明 |
|---|---|
| 字体 | 配置文本字体 |
| 字体大小 | 配置文本字体大小 |
| 字体粗细 | 配置文本字体粗细 |
| 字间距 | 配置文本中内容的字间距 |
| 字体颜色 | 配置文本字体颜色 |
| 背景颜色 | 配置文本字体背景色 |
| 文本修饰 | 配置文本字体的下划线、上划线和穿梭线 |
| 左右对齐 | 配置文本内容左右对齐方式 |
| 上下对齐 | 配置文本内容上下对齐方式 |
| 文本换行 | 配置文本内容换行方式 |
| 字体行高 | 配置文本内容行高 |
| 旋转角度 | 配置文本旋转角度 |
| 缩放 | 配置文本缩放倍数 |
| 左边框 | 配置文本左边框样式默认无边框 |
| 右边框 | 配置文本右边框样式默认无边框 |
| 上边框 | 配置文本上边框样式默认无边框 |
| 下边框 | 配置文本下边框样式默认无边框 |
| 边框大小 | 配置文本边框大小 |
| 边框颜色 | 配置文本边框颜色 |
| 左内边距 | 配置文本距左边的距离 |
| 右内边距 | 配置文本距右边的距离 |
| 上内边距 | 配置文本距上边的距离 |
| 下内边距 | 配置文本距下边的距离 |
# 高级配置说明
| 属性 | 说明 |
|---|---|
| 强制分页 | 强制在某一行或某几行后分页，默认不强制分页 |
| 拖动方向 | 配置文本组件可以拖动的方向 |
# 图片
图片组件的使用只需从左侧组件栏将组件拖动到画布合适的位置，并设置图片组件的【数据设置】即可。
# 属性配置说明
| 属性 | 说明 |
|---|---|
| 数据设置 | 配置图片的数据集数据源，可上传本地图片也可以选择数据集中图片地址。当选择数据集时，接口数据返回图片数据首选Base64格式，其次是http，https格式不支持打印 |
| 选择图片 | 配置图片显示本地上传的图片 |
| 图片缩放 | 配置图片的缩放方式 |
# 样式配置说明
| 属性 | 说明 |
|---|---|
| 旋转角度 | 配置图片旋转角度 |
# 高级配置说明
| 属性 | 说明 |
|---|---|
| 强制分页 | 强制在某一个图片或某几个图片后分页，默认不强制分页 |
| 拖动方向 | 配置图片组件可以拖动的方向 |
# 条形码
条形码组件的使用只需从左侧组件栏将组件拖动到画布合适的位置，并设置条形码组件的【数据设置】即可。
# 属性配置说明
| 属性 | 说明 |
|---|---|
| 数据设置 | 配置条形码内容的数据源 |
| 打印在 | 配置条形码在哪一页打印(默认、仅第一页、仅最后一页、仅奇数页、仅偶数页) |
| 条码类型 | 配置条形码类型，支持Code128、Code39、EAN-13、EAN-8、UPC-A等 |
| 坐标位置 | 配置条形码在画布上的位置 |
| 宽高大小 | 配置条形码的宽度和高度 |
| 标题显示隐藏 | 配置条形码的标题是否显示 |
| 位置固定 | 配置条形码位置是否固定 |
| 隐藏规则 | 配置条形码隐藏位置(例如：首页、尾页) |
| 显示规则 | 配置条形码显示位置(例如：首页、尾页、始终隐藏，奇数页、偶数页) |
# 样式配置说明
| 属性 | 说明 |
|---|---|
| 字体 | 配置条形码字体 |
| 字体大小 | 配置条形码字体大小 |
| 字体粗细 | 配置条形码字体粗细 |
| 字间距 | 配置条形码中内容的字间距 |
| 字体颜色 | 配置条形码字体颜色 |
| 背景颜色 | 配置条形码背景色 |
| 左右对齐 | 配置条形码标题对齐方式 |
| 旋转角度 | 配置条形码旋转角度 |
# 高级配置说明
| 属性 | 说明 |
|---|---|
| 强制分页 | 强制在某一个条码或某几个条码后分页，默认不强制分页 |
| 拖动方向 | 配置条形码组件可以拖动的方向 |
# 二维码
二维码组件的使用只需从左侧组件栏将组件拖动到画布合适的位置，并设置二维码组件的【数据设置】即可。
# 属性配置说明
| 属性 | 说明 |
|---|---|
| 数据设置 | 配置二维码内容的数据源 |
| 打印在 | 配置二维码在哪一页打印(默认、仅第一页、仅最后一页、仅奇数页、仅偶数页) |
| 二维码类型 | 配置二维码类型，支持QR Code |
| 坐标位置 | 配置二维码在画布上的位置 |
| 宽高大小 | 配置二维码的宽度和高度 |
| 标题显示隐藏 | 配置二维码的标题是否显示 |
| 位置固定 | 配置二维码位置是否固定 |
| 隐藏规则 | 配置二维码隐藏位置(例如：首页、尾页) |
| 显示规则 | 配置二维码显示位置(例如：首页、尾页、始终隐藏，奇数页、偶数页) |
# 样式配置说明
| 属性 | 说明 |
|---|---|
| 字体 | 配置二维码字体 |
| 字体大小 | 配置二维码字体大小 |
| 字体粗细 | 配置二维码字体粗细 |
| 字间距 | 配置二维码中内容的字间距 |
| 字体颜色 | 配置二维码字体颜色 |
| 背景颜色 | 配置二维码背景色 |
| 左右对齐 | 配置二维码标题对齐方式 |
| 旋转角度 | 配置二维码旋转角度 |
# 高级配置说明
| 属性 | 说明 |
|---|---|
| 强制分页 | 强制在某一个二维码或某几个二维码后分页，默认不强制分页 |
| 拖动方向 | 配置二维码组件可以拖动的方向 |
# 表格
表格组件的使用只需从左侧组件栏将组件拖动到画布合适的位置，并设置表格组件的【数据设置】即可。左侧的数据来源于页面中配置的打印入参及数据集页签中添加的数据集。 首先拖动表格后会弹出一个列表设置弹框，弹框中可以设置表格是否显示行号，选择数据集时不能选择多个Array子集数据，否则数据渲染错误。如图：
其次从左边数据集中选中数据后点击保存，如图：
表格组件应和其他组件保持一定距离，否则会有重叠的问题。
# 属性配置说明
| 属性 | 说明 |
|---|---|
| 数据设置 | 配置表格内容的数据源 |
| 打印在 | 配置表格在哪一页打印(默认、仅第一页、仅最后一页、仅奇数页、仅偶数页) |
| 坐标位置 | 配置表格在画布上的位置 |
| 宽高大小 | 配置表格的宽度和高度 |
| 表格头显示 | 配置表格头显示的位置 |
| 表格脚显示 | 配置表格脚显示的位置 |
| 自动补全 | 自动补全每页设置的最大行数 |
| 每页最大行数 | 每页显示的最大行数 |
# 样式配置说明
| 属性 | 说明 |
|---|---|
| 字体 | 配置表格字体 |
| 字体大小 | 配置表格字体大小 |
| 字体行高 | 配置表格字体行高 |
| 左右对齐 | 配置表格左右对齐 |
| 表格边框 | 配置表格是否有边框默认有边框 |
| 表头边框 | 配置表头边框默认有边框 |
| 表头单元格边框 | 配置表头单元格是否有边框默认有边框 |
| 表头行高 | 配置表头行高 |
| 表头背景 | 配置表头背景颜色 |
| 表头字体大小 | 配置表头字体大小 |
| 表头字体粗细 | 配置表头字体粗细 |
| 表体行高 | 配置表体行高 |
| 表体行边框 | 配置表体行边框大小 |
| 表体单元格边框 | 配置表体单元格边框默认有边框 |
| 表尾边框 | 配置表尾边框 |
| 表尾单元格边框 | 配置表尾单元格边框默认有边框 |
| 最低高度 | 文本过短或者为空时的高度 |
# 列属性配置说明
| 属性 | 说明 |
|---|---|
| 设置标题 | 配置列标题 |
| 动态行高 | 配置自动调节行高 |
| 单元格左右对齐 | 配置列中单元格内容左右对齐方式 |
| 表格头单元格左右对齐 | 配置列中表格头单元格内容左右对齐方式 |
| 单元格上下对齐 | 配置单元格内容上下对齐 |
| 字段类型 | 配置单元格字段类型默认文本 |
| 条形码格式 | 配置条形码格式 |
| 二维码容错率 | 配置二维码容错率(CODEE128A) |
| 单元格高度 | 配置单元格条形码、图片等高度 |
| 左内边距 | 配置单元格内容与左边框的距离 |
| 右内边距 | 配置单元格内容与右边框的距离 |
# 高级配置说明
| 属性 | 说明 |
|---|---|
| 拖动方向 | 配置表格拖动方向 |
# 套打表格
套打表格组件的使用只需从左侧组件栏将组件拖动到画布合适的位置，并设置套打表格组件的【数据设置】即可。
首先拖动套打表格后会弹出一个列表设置弹框，弹框中可以设置表格是否显示行号，如图：
其次从左边数据集中选中数据后点击保存，如图：
# 属性配置说明
| 属性 | 说明 |
|---|---|
| 数据设置 | 配置套打表格内容的数据源 |
| 打印在 | 配置套打表格在哪一页打印(默认、仅第一页、仅最后一页、仅奇数页、仅偶数页) |
| 坐标位置 | 配置套打表格在画布上的位置 |
| 宽高大小 | 配置套打表格的宽度和高度 |
| 表格头显示 | 配置套打表格头显示的位置 |
| 表格脚显示 | 配置套打表格脚显示的位置 |
| 自动补全 | 自动补全每页设置的最大行数 |
| 每页最大行数 | 每页显示的最大行数 |
# 样式配置说明
| 属性 | 说明 |
|---|---|
| 字体 | 配置表格字体 |
| 字体大小 | 配置表格字体大小 |
| 字体行高 | 配置表格字体行高 |
| 左右对齐 | 配置表格左右对齐 |
| 表格边框 | 配置表格是否有边框默认有边框 |
| 表头边框 | 配置表头边框默认有边框 |
| 表头单元格边框 | 配置表头单元格是否有边框默认有边框 |
| 表头行高 | 配置表头行高 |
| 表头背景 | 配置表头背景颜色 |
| 表头字体大小 | 配置表头字体大小 |
| 表头字体粗细 | 配置表头字体粗细 |
| 表体行高 | 配置表体行高 |
| 表体行边框 | 配置表体行边框大小 |
| 表体单元格边框 | 配置表体单元格边框默认有边框 |
| 表尾边框 | 配置表尾边框 |
| 表尾单元格边框 | 配置表尾单元格边框默认有边框 |
| 最低高度 | 文本过短或者为空时的高度 |
# 列属性配置说明
| 属性 | 说明 |
|---|---|
| 设置标题 | 配置列标题 |
| 动态行高 | 配置自动调节行高 |
| 单元格左右对齐 | 配置列中单元格内容左右对齐方式 |
| 表格头单元格左右对齐 | 配置列中表格头单元格内容左右对齐方式 |
| 单元格上下对齐 | 配置单元格内容上下对齐 |
| 字段类型 | 配置单元格字段类型默认文本 |
| 条形码格式 | 配置条形码格式 |
| 二维码容错率 | 配置二维码容错率(CODEE128A) |
| 单元格高度 | 配置单元格条形码、图片等高度 |
| 左内边距 | 配置单元格内容与左边框的距离 |
| 右内边距 | 配置单元格内容与右边框的距离 |
# 高级配置说明
| 属性 | 说明 |
|---|---|
| 拖动方向 | 配置表格拖动方向 |
# html
html控件是用来添加用户自定义的元素内容，用户可以根据自己的需求添加html内容，html控件可以通过格式化函数来自定义其中的内容。
其中格式化函数内传入三个参数title,options,templateData，title为当前html控件的绑定参数，由于html是与数据无关的控件，因此绑定的字段为空，options为当前html控件的配置项，templateData为当前页面的数据源。html控件就可以根据以上三个参数进行计算并最终返回所需的页面元素。 下面的示例代码描述了一个占位斜线根据页面的表格的数据条数动态改变高度，在不同的使用场景下，html控件的格式化函数可以进行不同的计算，从而实现不同的效果。
function formatter(title, options, templateData) {
let oc, ao = 0
let ac = "100%"
let updateObj = {
itemTransform: 0,
itemTop: 0,
itemLeft: 0,
itemWidth: 0,
}
if (templateData) {
Object.values(templateData).forEach((item) => {
if (Array.isArray(item)) {
// 如果行高为18pt
oc = Math.abs(options.width * Math.sin(Math.PI / 180 * Math.abs(options.transform)) - item.length * 18)
ao = Math.abs(options.width * Math.cos(Math.PI / 180 * Math.abs(options.transform)))
ac = Math.sqrt(oc * oc + ao * ao)
console.log((Math.asin(oc / ac)) * 180 / Math.PI, "(Math.asin(oc / ac)) * 180 / Math.PI")
updateObj.itemTransform = -Math.round(options.transform + ((Math.asin(oc / ac)) * 180 / Math.PI))
updateObj.itemTop = item.length * (18 - 9)/2
updateObj.itemWidth = Math.round(ac)
}
})
}
let res = `<div style="height:1pt;width:100%;background:red;"></div>`;
if (ac !== "100%") {
res = `<div style="position: relative;top: ${updateObj.itemTop}pt;height:1pt;width:${updateObj.itemWidth}pt;transform:rotate(${updateObj.itemTransform}deg);background:red;"></div>`;
return res
}
# 属性配置说明
| 属性 | 说明 |
|---|---|
| 位置坐标 | 配置元素在画布中的位置 |
| 打印在 | 配置元素在哪一页打印(默认、仅第一页、仅最后一页、仅奇数页、仅偶数页) |
| 宽高大小 | 配置元素的宽度和高度 |
| 显示规则 | 配置元素显示位置(例如：首页、尾页、始终隐藏，奇数页、偶数页) |
| 隐藏规则 | 配置元素隐藏位置(例如：首页、尾页) |
| 位置固定 | 配置元素位置是否固定 |
# 样式配置说明
| 属性 | 说明 |
|---|---|
| 旋转角度 | 配置横线的旋转角度 |
# 高级配置说明
| 属性 | 说明 |
|---|---|
| 强制分页 | 强制在某一个横线或某几个横线后分页，默认不强制分页 |
| 拖动方向 | 配置横线可以拖动的方向、默认横向、纵向都可以 |
| 格式化函数 | 配置横线可以拖动的方向、默认横向、纵向都可以 |
# 横线
横线的使用只需从左侧组件栏将组件拖动到画布合适的位置，并调整其长度和样式即可。
# 属性配置说明
| 属性 | 说明 |
|---|---|
| 位置坐标 | 配置横线在画布中的位置 |
| 宽高大小 | 配置横线的宽度和高度 |
| 打印在 | 配置横线在哪一页打印(默认、仅第一页、仅最后一页、仅奇数页、仅偶数页) |
| 显示规则 | 配置横线显示位置(例如：首页、尾页、始终隐藏，奇数页、偶数页) |
| 位置固定 | 配置横线位置是否固定 |
# 样式配置说明
| 属性 | 说明 |
|---|---|
| 线宽 | 配置横线的宽度 |
| 样式 | 配置横线的样式，可以配置实线、长虚线、短虚线 |
| 颜色 | 配置横线的颜色 |
| 旋转角度 | 配置横线的旋转角度 |
# 高级配置说明
| 属性 | 说明 |
|---|---|
| 强制分页 | 强制在某一个横线或某几个横线后分页，默认不强制分页 |
| 拖动方向 | 配置横线可以拖动的方向、默认横向、纵向都可以 |
# 竖线
竖线的使用只需从左侧组件栏将组件拖动到画布合适的位置，并调整其长度和样式即可。
| 属性 | 说明 |
|---|---|
| 位置坐标 | 配置竖线在画布中的位置 |
| 宽高大小 | 配置竖线的宽度和高度 |
| 打印在 | 配置横线在哪一页打印(默认、仅第一页、仅最后一页、仅奇数页、仅偶数页) |
| 显示规则 | 配置横线显示位置(例如：首页、尾页、始终隐藏，奇数页、偶数页) |
| 位置固定 | 配置横线位置是否固定 |
# 样式配置说明
| 属性 | 说明 |
|---|---|
| 线宽 | 配置竖线的宽度 |
| 样式 | 配置竖线的样式，可以配置实线、长虚线、短虚线 |
| 颜色 | 配置竖线的颜色 |
| 旋转角度 | 配置竖线的旋转角度 |
# 高级配置说明
| 属性 | 说明 |
|---|---|
| 强制分页 | 强制在某一个竖线或某几个竖线后分页，默认不强制分页 |
| 拖动方向 | 配置竖线可以拖动的方向、默认横向、纵向都可以 |
# 矩形
矩形的使用只需从左侧组件栏将组件拖动到画布合适的位置，并调整其样式即可。
| 属性 | 说明 |
|---|---|
| 位置坐标 | 配置矩形在画布中的位置 |
| 宽高大小 | 配置矩形的宽度和高度 |
| 打印在 | 配置矩形在哪一页打印(默认、仅第一页、仅最后一页、仅奇数页、仅偶数页) |
| 显示规则 | 配置矩形显示位置(例如：首页、尾页、始终隐藏，奇数页、偶数页) |
| 位置固定 | 配置矩形位置是否固定 |
# 样式配置说明
| 属性 | 说明 |
|---|---|
| 线宽 | 配置矩形边框线的宽度 |
| 样式 | 配置矩形边框的样式，可以配置实线、长虚线、短虚线 |
| 颜色 | 配置矩形边框的颜色 |
| 背景色 | 配置矩形的背景颜色 |
| 旋转角度 | 配置矩形的旋转角度 |
# 高级配置说明
| 属性 | 说明 |
|---|---|
| 强制分页 | 强制在某一个矩形或某几个矩形后分页，默认不强制分页 |
| 拖动方向 | 配置矩形可以拖动的方向、默认横向、纵向都可以 |
# 椭圆
椭圆的使用只需从左侧组件栏将组件拖动到画布合适的位置，并调整其样式即可。
| 属性 | 说明 |
|---|---|
| 位置坐标 | 配置椭圆在画布中的位置 |
| 宽高大小 | 配置椭圆的宽度和高度 |
| 打印在 | 配置椭圆在哪一页打印(默认、仅第一页、仅最后一页、仅奇数页、仅偶数页) |
| 显示规则 | 配置椭圆显示位置(例如：首页、尾页、始终隐藏，奇数页、偶数页) |
| 位置固定 | 配置椭圆位置是否固定 |
# 样式配置说明
| 属性 | 说明 |
|---|---|
| 线宽 | 配置椭圆边框线的宽度 |
| 样式 | 配置椭圆边框的样式，可以配置实线、长虚线、短虚线 |
| 颜色 | 配置椭圆边框的颜色 |
| 背景颜色 | 配置椭圆的背景颜色 |
| 旋转角度 | 配置椭圆的旋转角度 |
# 高级配置说明
| 属性 | 说明 |
|---|---|
| 强制分页 | 强制在某一个椭圆或某几个椭圆后分页，默认不强制分页 |
| 拖动方向 | 配置椭圆可以拖动的方向、默认横向、纵向都可以 |
# 组件公共功能
通过画布上方各个功能按钮可以对各个组件的显示位置、画布大小、内容撤销、恢复、对齐方式等功能进行操作。
# 保存模板配置
将模板配置好的所有属性进行保存。
# Lodop打印模板使用说明
首先安装C-Lodop插件，具体安装步骤请参考该帮助文档下载：C-Lodop技术手册。
打印页面通过两种方式可以调用，在没有引入vue框架的项目中iframe进行访问，否则可以直接在组件上调用，以下将详细介绍这两种调用的方式：
# iframe方式调用
在系统管理-菜单管理内创建一个iframe页面，配置示例如下：
其中路由所配置的地址，是在static静态文件夹下的一个html页面，页面内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iframe-lodop</title>
</head>
<body>
<button onclick="preview()">预览</button>
<button onclick="printFunc()">打印</button>
<button onclick="getHtmlStr()">获取html</button>
<button onclick="getBase64()">获取Base64</button>
<script>
window.addEventListener('message', (event) => {
const {funType, data: {htmlStr}} = event.data
console.log(htmlStr)
}, false);
var paramsData = {
code: "printparam",
param: `{
"name": "李四",
"sex": "女",
"goods": [{
"name": "洗发水",
"price": 8.88
}, {
"name": "牙刷",
"price": 555.555
}, {
"name": "香皂",
"price": 342
}, {
"name": "毛巾",
"price": 432
}]
}`,
elements: [
{
"options": {
"left": 192.5,
"top": 127.5,
"height": 31,
"width": 200,
"hideTitle": true,
"testData": "传入文字",
"title": "传入文字",
"id": "abc123",
"field": "abc123",
"hide0": false,
"coordinateSync": false,
"widthHeightSync": false,
"right": 393.74998474121094,
"bottom": 158.5,
"vCenter": 293.74998474121094,
"hCenter": 143
},
"printElementType": {
"title": "文本",
"type": "text"
}
}
],
elementsData: {
abc123: "测试文字"
}
}
function preview() {
const name = window.parent.name
window.parent.postMessage({
funcName: 'previewFn',
lodopName: name,
params: paramsData
}, '*')
}
function printFunc() {
const name = window.parent.name
window.parent.postMessage(
{
funcName: 'printFn',
lodopName: name,
params: paramsData
}, '*')
}
function getHtmlStr() {
const name = window.parent.name
window.parent.postMessage( {
funcName: 'getHtmlStr',
lodopName: name,
params: paramsData
}, '*')
}
function getBase64() {
const name = window.parent.name
window.parent.postMessage( {
funcName: 'getBase64',
lodopName: name,
params: paramsData
}, '*')
}
</script>
</body>
</html>
html页面中包含四个方法，分别为预览（printFunc）、打印（getHtmlStr）、获取页面html（printHtmlStr）和获取获取Base64（getBase64）。这四个方法都是通过postMessage调用父页面的同名方法，这些方法的参数接收三个参数，funcName是方法名，lodopName是当前iframe的名称，params接收四个参数，分别是code、param、elements和elementsData。 其中code是模板的编码，param是模板的参数，elements是模板中手动添加的需要打印的元素，elementsData是模板中手动添加的需要打印的元素的数据。 具体使用时可对数据进一步封装，以方便调用。下图为以上示例的预览效果。
注意
打印或预览功能需要调用接口，因此所需时间可能较长。
# 组件引入调用
打印有预览打印和直接打印两种方式，其中预览可以在弹窗中看到即将打印的模板的内容，而直接打印则按照之前在项目中配置好的模板直接调用打印机打印。在具体使用时需引入打印组件，组件在项目中的绝对路径为@base/views/origin-data/print-design/template-design/index.vue。引用时需要传递两个参数code和param,这两个参数是模板的编码和参数。由于组件自身为打印设计器的组件，因此如果不希望在页面中展示该设计器的内容，可以将它隐藏在页面中，具体使用时可参考以下代码。
<lodop-vue ref="lodopRef" :code="code" :param="param" style="visibility: hidden;position: fixed;z-index: -99999;left:0;top:0"></lodop-vue>
预览打印或直接打印调用的方法可参考以下示例。
// 预览
previewFn() {
this.$refs.lodopRef.previewFn()
}
// 打印
printFn() {
this.$refs.lodopRef.printFn()
},
# 预览功能
对配置好的模板可以进行预览。
注意
如果预览中数据未显示，请检查数据集编辑页面中出参示例数据，该数据不能为空。
# 套打使用说明
1.测量套打图片的大小，根据图片的大小将【纸张】改为自定，并配置纸张的宽高为图片的宽高。然后点击【套打背景】上传套打背景图
2.将套打表格拖入画布，调整合适位置，修改字体大小，表格行高，以及列的宽度，使套打表格和套打背景相匹配。
3.配置页面其他数据
4.关闭【显示套打底图】，保存模板，通过公共方法调用模板测试。
← PageOffice打印设计器 生产许可证 →