# 面板对象

```js
var panel = hiprintTemplate.addPrintPanel({ width: 100, height: 130, paperFooter: 340, paperHeader: 10 });
```

#### options
| 名称  | 类型  | 描述  |
| --- | --- | --- |
| width | number | `毫米` 打印纸质宽度 |
| height | number | `毫米` 打印纸质高度 |
| paperHeader | number | `pt磅 1in = 2.54cm = 25.4 mm = 72pt = 6pc` 页眉线（缺省值=0） |
| paperFooter | number | `pt磅 1in = 2.54cm = 25.4 mm = 72pt = 6pc` 页尾线（缺省值=纸张底部） |
| paperFooter | number | `pt磅 1in = 2.54cm = 25.4 mm = 72pt = 6pc` 页尾线（缺省值=纸张底部） |
| paperNumberDisabled | boolean | 禁用页码（缺省值=false） 打印设计 双击页码则切换状态 |
| paperNumberFormat | string | 页码格式（缺省值paperNo-paperCount） |
| panelPaperRule | string | 面板打印纸张规则  <br>odd:打印纸张保持奇数  <br>even:打印纸张保持偶数 |
| firstPaperFooter | number | 首页页尾线位置 |
| evenPaperFooter | number | 偶数页页尾线位置 |
| oddPaperFooter | number | 奇数页页尾线位置 |
| lastPaperFooter | number | 尾页页尾线位置 |
| leftOffset | number | 打印左偏移量  <br>template.print(data,{leftOffset:-1}) 将覆盖面板的左偏移  <br>template.getHtml(data,{leftOffset:-1}) 将覆盖面板的左偏移 |
| topOffset | number | 打印顶部偏移量  <br>template.print(data,{topOffset:-1}) 将覆盖面板的顶部偏移  <br>template.getHtml(data,{topOffset:-1}) 将覆盖面板的顶部偏移 |

# 文本
普通文本分为3种类型：`文本类型`、`条形码类型`、`二维码类型`。
```js
panel.addPrintText({ options: { width: 140, height: 15, top: 20, left: 20, title: 'hiprint插件手动添加text', textAlign: 'center' } });
```

#### printElementType
| 名称  | 类型  | 描述  | 默认值 |
| --- | --- | --- | --- |
| tid | string | 元素类型的标识 |     |
| title | string | 用户托拽列表中显示的名称 |     |
| field | string | 打印元素类型所对应的数据Josn的Key |     |
| data | string | 打印设置时，显示的默认值 |     |
| formatter | function | 文本元素格式化函数，需要五个参数：  <br>title：标题。  <br>value：值。  <br>options：打印元素的选项值。  <br>templateData：模板数据。  <br>target：文本控件dom。  <br>formatter:function(title,value,options,templateData,target){ return value=='1'?'测试':value; } |     |
| styler | function | 文本元素的样式函数，返回样式对象来自定义该 文本元素的样式，例如 {'background':'red'} 。该函数需要四个参数：  <br>value：字段的值。  <br>options：打印元素的选项值。  <br>target：文本控件dom。  <br>templateData：模板数据。  <br>styler:function(value,options,target,templateData){ return {color:'red'} } |     |
| onRendered | function | 元素渲染完成事件，该函数需要三个参数：  <br>target：元素jq dom。  <br>options：打印元素的选项值。  <br>paperTarget：打印所在纸张的ja dom |     |
| fields | 数组  | 元素的字段数据源\[{field:'' ,text:'' }\]  <br>fields存在 元素字段则显示为下拉框显示  <br>fields 不存在 元素字段则为输入框显示  <br>优先级高于 模板全局设置数据源 |     |

#### options
| 名称  | 类型  | 描述  | 默认值 |
| --- | --- | --- | --- |
| title | string | 标题或内容，field 存在：title为标题，打印结果为 `title:data` , field 不存在：title为内容，打印结果为 `title` |     |
| field | string | 字段名称 |     |
| testData | string | 测试数据，打印设计时 作为data,预览或打印时被真实数据替换 |     |
| fontFamily | string | 字体  | 宋体  |
| fontSize | number | 字体大小 | 9pt |
| fontWeight | string | 字体粗细 |     |
| letterSpacing | number | 字间距 |     |
| color | number | 字体颜色 |     |
| textDecoration | string | 文本描述 |     |
| textAlign | string | 对齐 left center right |     |
| lineHeight | number | 行高  | 9.75pt |
| textType | string | 文本类型 text barcode(条形码) qrcode(二维码) | text |
| barcodeMode | string | 条形码格式 |     |
| hideTitle | boolean | 隐藏标题 | false |
| showInPage | string | 显示规则`仅页眉页尾元素或位置固定固定有效`  <br>first:首页显示  <br>odd:奇数页显示  <br>even:偶数页显示  <br>last:尾页显示 |     |
| fixed | bool | 位置固定 每页打印到指定位置  <br>位置固定的元素脱离正常的打印流，让不在页眉页脚范围内的元素拥有每页输出的特性。  <br>与面板指定页页尾线设置功能 相互协作 可以设置指定页 不同的页尾信息展示。 |     |
| axis | string | 打印设计时拖拽方向 axis v:竖向 h:横向。需在design方法中显示开启，template.design('#designDiv',{ axisEnabled:true }) |     |
| transform | number | 旋转角度 |     |

# 图片
#### printElementType
| 名称  | 类型  | 描述  | 默认值 |
| --- | --- | --- | --- |
| tid | string | 元素类型的标识 |     |
| field | string | 打印元素类型所对应的数据Josn的Key |     |
| data | string | 打印设置时，显示的默认值 |     |
| formatter | function | 文本元素格式化函数，需要三个参数：  <br>value：值。  <br>options：打印元素的选项值。  <br>templateData：模板数据。 |     |
| styler | function | 文本元素的样式函数，返回样式对象来自定义该 文本元素的样式，例如 {'background':'red'} 。该函数需要四个参数：  <br>value：字段的值。  <br>options：打印元素的选项值。  <br>target：控件dom。  <br>templateData：模板数据。 |     |
| onRendered | function | 元素渲染完成事件，该函数需要三个参数：  <br>target：元素jq dom。  <br>options：打印元素的选项值。  <br>paperTarget：打印所在纸张的jq dom |     |
| fields | 数组  | 元素的字段数据源\[{field:'' ,text:'' }\]  <br>fields存在 元素字段则显示为下拉框显示  <br>fields 不存在 元素字段则为输入框显示  <br>优先级高于 模板全局设置数据源 |     |

#### options
| 名称  | 类型  | 描述  | 默认值 |
| --- | --- | --- | --- |
| title | string | 标题或内容，field 存在：title为标题，打印结果为 `title:data` , field 不存在：title为内容，打印结果为 `title` |     |
| field | string | 字段名称 |     |
| src | string | field不存在的情况下，显示src的内容 |     |
| showInPage | string | 显示规则`仅页眉页尾元素或位置固定固定有效`  <br>first:首页显示  <br>odd:奇数页显示  <br>even:偶数页显示  <br>last:尾页显示 |     |
| fixed | bool | 位置固定 每页打印到指定位置  <br>位置固定的元素脱离正常的打印流，让不在页眉页脚范围内的元素拥有每页输出的特性。  <br>与面板指定页页尾线设置功能 相互协作 可以设置指定页 不同的页尾信息展示。 |     |
| axis | string | 打印设计时拖拽方向 axis v:竖向 h:横向。需在design方法中显示开启，template.design('#designDiv',{ axisEnabled:true }) |     |
| transform | number | 旋转角度 |     |

# 横线
```js
panel.addPrintHline({ options: { width: 135, top: 30, left: 20,borderColor:'',borderWidth:0.75 } });
```
#### printElementType
| 名称  | 类型  | 描述  | 默认值 |
| --- | --- | --- | --- |
| tid | string | 元素类型的标识 |     |
| onRendered | function | 元素渲染完成事件，该函数需要三个参数：  <br>target：元素jq dom。  <br>options：打印元素的选项值。  <br>paperTarget：打印所在纸张的jq dom |     |

#### options
| 名称  | 类型  | 描述  | 默认值 |
| --- | --- | --- | --- |
| borderColor（可空） | string | 边框颜色 |     |
| borderWidth（可空） | string | 边框大小 |     |
| showInPage | string | 显示规则`仅页眉页尾元素或位置固定固定有效`  <br>first:首页显示  <br>odd:奇数页显示  <br>even:偶数页显示  <br>last:尾页显示 |     |
| fixed | bool | 位置固定 每页打印到指定位置  <br>位置固定的元素脱离正常的打印流，让不在页眉页脚范围内的元素拥有每页输出的特性。  <br>与面板指定页页尾线设置功能 相互协作 可以设置指定页 不同的页尾信息展示。 |     |
| axis | string | 打印设计时拖拽方向 axis v:竖向 h:横向。需在design方法中显示开启，template.design('#designDiv',{ axisEnabled:true }) |     |
| transform | number | 旋转角度 |     |

# 竖线
```js
panel.addPrintVline({ options: { height: 35, top: 230, left: 20,borderColor:'',borderWidth:0.75 } });
```

#### printElementType
| 名称  | 类型  | 描述  | 默认值 |
| --- | --- | --- | --- |
| tid | string | 元素类型的标识 |     |
| onRendered | function | 元素渲染完成事件，该函数需要三个参数：  <br>target：元素jq dom。  <br>options：打印元素的选项值。  <br>paperTarget：打印所在纸张的ja dom |     |

#### options
| 名称  | 类型  | 描述  | 默认值 |
| --- | --- | --- | --- |
| borderColor（可空） | string | 边框颜色 |     |
| borderWidth（可空） | string | 边框大小 |     |
| showInPage | string | 显示规则`仅页眉页尾元素或位置固定固定有效`  <br>first:首页显示  <br>odd:奇数页显示  <br>even:偶数页显示  <br>last:尾页显示 |     |
| fixed | bool | 位置固定 每页打印到指定位置 |     |
| transform | number | 旋转角度 |     |

# 矩形
```js
panel.addPrintRect({ options: { width: 135, height:135,top: 30, left: 20,borderColor:'',borderWidth:0.75 } });
```

#### printElementType
| 名称  | 类型  | 描述  | 默认值 |
| --- | --- | --- | --- |
| tid | string | 元素类型的标识 |     |
| onRendered | function | 元素渲染完成事件，该函数需要三个参数：  <br>target：元素jq dom。  <br>options：打印元素的选项值。  <br>paperTarget：打印所在纸张的ja dom |     |

#### options
| 名称  | 类型  | 描述  | 默认值 |
| --- | --- | --- | --- |
| borderColor（可空） | string | 边框颜色 |     |
| borderWidth（可空） | string | 边框大小 |     |
| showInPage | string | 显示规则`仅页眉页尾元素或位置固定固定有效`  <br>first:首页显示  <br>odd:奇数页显示  <br>even:偶数页显示  <br>last:尾页显示 |     |
| fixed | bool | 位置固定 每页打印到指定位置  <br>位置固定的元素脱离正常的打印流，让不在页眉页脚范围内的元素拥有每页输出的特性。  <br>与面板指定页页尾线设置功能 相互协作 可以设置指定页 不同的页尾信息展示。 |     |
| axis | string | 打印设计时拖拽方向 axis v:竖向 h:横向。需在design方法中显示开启，template.design('#designDiv',{ axisEnabled:true }) |     |
| transform | number | 旋转角度 |     |

# 椭圆
```js
panel.addPrintOval({ options: { width: 135, height:135,top: 30, left: 20,borderColor:'',borderWidth:0.75 } });
```

#### printElementType
| 名称  | 类型  | 描述  | 默认值 |
| --- | --- | --- | --- |
| tid | string | 元素类型的标识 |     |
| onRendered | function | 元素渲染完成事件，该函数需要三个参数：  <br>target：元素jq dom。  <br>options：打印元素的选项值。  <br>paperTarget：打印所在纸张的ja dom |     |

#### options
| 名称  | 类型  | 描述  | 默认值 |
| --- | --- | --- | --- |
| borderColor（可空） | string | 边框颜色 |     |
| borderWidth（可空） | string | 边框大小 |     |
| showInPage | string | 显示规则`仅页眉页尾元素或位置固定固定有效`  <br>first:首页显示  <br>odd:奇数页显示  <br>even:偶数页显示  <br>last:尾页显示 |     |
| fixed | bool | 位置固定 每页打印到指定位置  <br>位置固定的元素脱离正常的打印流，让不在页眉页脚范围内的元素拥有每页输出的特性。  <br>与面板指定页页尾线设置功能 相互协作 可以设置指定页 不同的页尾信息展示。 |     |
| axis | string | 打印设计时拖拽方向 axis v:竖向 h:横向。需在design方法中显示开启，template.design('#designDiv',{ axisEnabled:true }) |     |
| transform | number | 旋转角度 |     |

# 表格

#### printElementType
| 名称  | 类型  | 描述  | 默认值 |
| --- | --- | --- | --- |
| tid | string | 元素类型的标识 |     |
| title | string | 用户托拽列表中显示的名称 |     |
| field | string | 字段名称 |     |
| styler | function | 表格样式函数，返回样式对象来自定义该 表格元素的样式，例如 {'background':'red'} 。该函数需要二个参数：  <br>value：字段的值。  <br>options：打印元素的选项值。 |     |
| rowStyler | function | 表格列样式函数，返回样式对象来自定义该 tr元素的样式，例如 {'background':'red'} 。该函数需要二个参数：  <br>value：字段的值。  <br>options：打印元素的选项值。 |     |
| `columns` | array<array\> | 表格的列（column）的配置对象，更多细节请参见列（column）属性。\[\[{},{}\]\[{},{}\]\] //多行表头 |     |
| formatter | function | 该函数需要一个参数：data | 返回表格的html 字符串 |
| groupFields | array | 表格的数据的分组字段，该字段为数组，可以根据多列进行分组。 |     |
| groupFormatter | function | 分组头格式化函数，定义分组显示信息，当groupFields数组长度为1是默认显示为字段值。该函数需要二个参数：  <br>groupData：分组信息。  <br>options：打印元素的选项值。 |     |
| footerFormatter | function | 表格脚格式化函数，定义分组尾部显示信息，可以放置写统计信息。。该函数需要四个参数：  <br>options：打印元素的选项值。  <br>rows  <br>data  <br>currentPageGridRowsData：当前页数据 |     |
| gridColumnsFooterFormatter | function | 多组表格脚格式化函数，定义分组尾部显示信息，可以放置写统计信息。。该函数需要四个参数：  <br>options：打印元素的选项值。  <br>rows  <br>data  <br>currentPageRowsData：当前页数据 |     |
| groupFooterFormatter | function | 分组脚格式化函数，定义分组尾部显示信息，可以放置写统计信息。。该函数需要二个参数：  <br>groupData：分组信息。  <br>options：打印元素的选项值。 |     |
| onRendered | function | 元素渲染完成事件，该函数需要三个参数：  <br>target：元素jq dom。  <br>options：打印元素的选项值。  <br>paperTarget：打印所在纸张的ja dom |     |
| fields | 数组  | 元素的字段数据源\[{field:'' ,text:'' }\]  <br>fields存在 元素字段则显示为下拉框显示  <br>fields 不存在 元素字段则为输入框显示  <br>优先级高于 模板全局设置数据源 |     |

###### `columns`列属性
| 名称  | 类型  | 描述  | 默认值 |
| --- | --- | --- | --- |
| width | number | 此宽度只是相对值 实际渲染会等比换算 | 100 |
| title | string | 列标题 |     |
| field | string | 列所对应的数据字段 |     |
| fixed | boolean | 宽度锁定，渲染时不进行等比换算 | false |
| rowspan | number | 指示一个单元格占据多少行。 |     |
| colspan | number | 指示一个单元格占据多少列。 |     |
| align | string | 指示如何对齐该列的数据，可以用 'left'、'right'、'center'。 |     |
| halign | string | 指示如何对齐该列的头部，可能的值：'left'、'right'、'center'。如果没有分配值，则头部对齐方式将与通过 'align' 属性定义的数据对齐方式一致 |     |
| formatter | function | 单元格的格式化函数，需要四个参数：  <br>value：字段的值。  <br>row：行的记录数据。  <br>index：行的索引。  <br>options：打印元素的选项值 |     |
| styler | function | 单元格的样式函数，需要四个参数：  <br>value：字段的值。  <br>row：行的记录数据。  <br>index：行的索引。  <br>options：打印元素的选项值 |     |

#### options
| 名称  | 类型  | 描述  | 默认值 |
| --- | --- | --- | --- |
| field | string | 字段名称 |     |
| fontFamily | string | 字体  | 宋体  |
| fontSize | number | 字体大小 | 9pt |
| lineHeight | number | 行高  | 9.75pt |
| textAlign | string | 对齐 left center right |     |
| tableBorder | string | 表格边框noBorder或border |     |
| tableHeaderBorder | string | 表头边框noBorder或border或topBorder或bottomBorder或topBottomBorder |     |
| tableHeaderCellBorder | string | 表头单元格边框noBorder或border |     |
| tableHeaderRowHeight | number | 表头高度pt |     |
| tableHeaderBackground | string | 表头颜色 |     |
| tableHeaderFontSize | number | 表头字体大小 |     |
| tableHeaderFontWeight | string | 表头字体粗细 |     |
| tableBodyCellBorder | string | 表体单元格边框noBorder或borde |     |
| tableBodyRowBorder | string | 表头边框noBorder或border或topBorder或bottomBorder或topBottomBorder |     |
| tableBodyRowHeight | number | 标题行高度 |     |
| axis | string | 打印设计时拖拽方向 axis v:竖向 h:横向。需在design方法中显示开启，template.design('#designDiv',{ axisEnabled:true }) |     |
| lHeight | number | 当长文本或表格数据过少或为空，元素高度将是他们占用的实际高度，下方元素保持原有间距。可以设置元素lHeight属性（number）来设置元素显示的最小高度。 |     |


# 长文本
长文本和文本的区别,长文本随着文本数据的长度变大，打印高度不断变高，高度过高则自动分页，长文本下方元素同步下移和长文本保持设定好的边距，文本类型：定高定宽，打印区域不变。不会对其他打印元素造成影响。
```js
panel.addPrintLongText({ options: { width: 140, height: 15, top: 20, left: 20, title: 'hiprint插件手动添加text', textAlign: 'center' } });
```

#### printElementType
| 名称  | 类型  | 描述  | 默认值 |
| --- | --- | --- | --- |
| tid | string | 元素类型的标识 |     |
| title | string | 用户托拽列表中显示的名称 |     |
| field | string | 打印元素类型所对应的数据Josn的Key |     |
| data | string | 打印设置时，显示的默认值 |     |
| formatter | function | 文本元素格式化函数，需要四个参数：  <br>title：标题。  <br>value：值。  <br>options：打印元素的选项值。  <br>templateData：模板数据。 |     |
| styler | function | 文本元素的样式函数，返回样式对象来自定义该 文本元素的样式，例如 {'background':'red'} 。该函数需要四个参数：  <br>value：字段的值。  <br>options：打印元素的选项值。  <br>target：长文本控件dom。  <br>templateData：模板数据。 |     |
| onRendered | function | 元素渲染完成事件，该函数需要三个参数：  <br>target：元素jq dom。  <br>options：打印元素的选项值。  <br>paperTarget：打印所在纸张的ja dom |     |
| fields | 数组  | 元素的字段数据源\[{field:'' ,text:'' }\]  <br>fields存在 元素字段则显示为下拉框显示  <br>fields 不存在 元素字段则为输入框显示  <br>优先级高于 模板全局设置数据源 |     |

#### options
| 名称  | 类型  | 描述  | 默认值 |
| --- | --- | --- | --- |
| title | string | 标题或内容，field 存在：title为标题，打印结果为 `title:data` , field 不存在：title为内容，打印结果为 `title` |     |
| field | string | 字段名称 |     |
| testData | string | 测试数据，打印设计时 作为data,预览或打印时被真实数据替换 |     |
| fontFamily | string | 字体  | 宋体  |
| fontSize | number | 字体大小 | 9pt |
| fontWeight | string | 字体粗细 |     |
| letterSpacing | number | 字间距 |     |
| color | number | 字体颜色 |     |
| textDecoration | string | 文本描述 |     |
| textAlign | string | 对齐 left center right |     |
| lineHeight | number | 行高  | 9.75pt |
| hideTitle | boolean | 隐藏标题 | false |
| longTextIndent | number | 每行缩进 |     |
| showInPage | string | 显示规则`仅页眉页尾元素或位置固定固定有效`  <br>first:首页显示  <br>odd:奇数页显示  <br>even:偶数页显示  <br>last:尾页显示 |     |
| fixed | bool | 位置固定 每页打印到指定位置  <br>位置固定的元素脱离正常的打印流，让不在页眉页脚范围内的元素拥有每页输出的特性。  <br>与面板指定页页尾线设置功能 相互协作 可以设置指定页 不同的页尾信息展示。 |     |
| leftSpaceRemoved | boolean | 移除段落左侧空白符 | true |
| axis | string | 打印设计时拖拽方向 axis v:竖向 h:横向。需在design方法中显示开启，template.design('#designDiv',{ axisEnabled:true }) |     |
| lHeight | number | 当长文本或表格数据过少或为空，元素高度将是他们占用的实际高度，下方元素保持原有间距。可以设置元素lHeight属性（number）来设置元素显示的最小高度。 |     |
| transform | number | 旋转角度 |     |