Kaop打印项之表格

表格

功能说明

实现表格的打印，支持单元格合并、表头表脚、分页等设置，详细参见属性列表

表格属性列表

属性名类型默认值说明nameString“”打印项的名称，在打印任务内应该唯一。labelString“”打印项的标题，打印设计或维护时， 可以更好的了解打印项代表的含义。xString0左边缘相对于打印区域的位置，默认单位毫米(mm)，
可用单位:
毫米 - mm，如：“10mm”
厘米 - cm，如：“1cm”
点 - pt，如：“16pt”
英寸 - in，如：“1in”
派卡 - pc，如：“2pc”
像素 - px，如：“10px”
单位换算关系:
1in = 2.54cm = 25.4 mm = 72pt = 6pc=96px，
同时支持百分比，如：“20%”,表示占父容器可
用宽度的20%的位置。yString0上边缘相对打印区域的位置，默认单位毫米(mm),
支持单位及单位换算参见"x"属性，同时支持百分比，
如：“20%”,表示占父容器可用高度的20%的位置。widthStringnull宽度，默认单位毫米(mm),
支持单位及单位换算参见"x"属性，同时支持百分比，
如：“20%”,表示占父容器可用宽度的20%。heightStringnull高度，默认单位毫米(mm),
支持单位及单位换算参见"x"属性，同时支持百分比，
如：“20%”,表示占父容器可用高度的20%。zindexInteger0打印项所在图层，图层数值大的打印项会遮挡
图层数值小的打印项。columnsString[]null表格的列，如：[“10mm”,“20mm”,“30mm”],列宽支持单位及单位换算参见"x"属性，同时支持百分比， 如：“20%”,表示占表格可用宽度的20%。numberOfColumnsInteger1表格的列数，当columns属性为null时有效，每列宽度为表格宽度/列数。rowHeightStringnull默认行高，默认单位毫米(mm), 支持单位及单位换算参见"x"属性。fontNameStringnull字体名称，如:"宋体"等fontStyleStringnull字体风格，支持如下风格：
普通 - plain
粗体 - bold
斜体 - italic
可以设置多个风格，风格之间用"|"分割，
如：“bold|italic”fontSizeStringnull字体大小，默认单位厘米(mm) 支持单位及单位换算参见"x"属性。colorStringnull文本颜色，支持CSS中颜色定义规范,如： “#fff”, “#f2f2f2”, “rgb(255,255,0)”, “rgba(255,255,0,125)”paginateBooleanfalse是否分页headPerPageBooleantrue每页显示表头headTableRow[]null表头，TableRow数组，TableRow属性参见6.10.3表格行属性列表。bodyTableRow[]null表体，TableRow数组，TableRow属性参见6.10.3表格行属性列表。footTableRow[]null表脚，TableRow数组，TableRow属性参见6.10.3表格行属性列表。backgroundColorStringnull文本描边颜色，支持CSS中颜色定义规范， 参见color属性。borderStringnull边框，类似css中的border属性，如： "1mm 2mm 3mm 4mm"表示 上边宽1mm，右边宽2mm，底边宽3mm， 左边宽4mmborderDashStringnull边框线型，默认null表示实线，可以分别指定每个边
的线型，如：
“dash dot-dash dash dot-dash”
表示上边为虚线，右边为点划线，底边为虚线，
左边为点划线。也可指定所有边为统一的线型，如：
"dash"所有边为虚线。
线型有效值如下：
solid - 实线
dotted - 点线
dashed - 虚线
dot-dash - 点划线
double-dot-dash - 双点划线
自定义 -线型由 “线+缺口+线+缺口+线+缺口……”
组成，如：“6pt 3pt”。borderColorStringnull边框颜色，支持CSS中颜色定义规范,如： “#fff”, “#f2f2f2”, “rgb(255,255,0)”, “rgba(255,255,0,125)”marginStringnull外边距，类似CSS中margin，如： "1pt 2pt 3pt 4pt"表示上右下左的外边距 分别为1pt、2pt、3pt、4pt；cellBorderStringnull单元格边框，类似css中的border属性，如： "1mm 2mm 3mm 4mm"表示 上边宽1mm，右边宽2mm，底边宽3mm， 左边宽4mmcellBorderDashStringnull单元格边框线型，默认null表示实线，可以分别指定每个边
的线型，如：
“dash dot-dash dash dot-dash”
表示上边为虚线，右边为点划线，底边为虚线，
左边为点划线。也可指定所有边为统一的线型，如：
"dash"所有边为虚线。
线型有效值如下：
solid - 实线
dotted - 点线
dashed - 虚线
dot-dash - 点划线
double-dot-dash - 双点划线
自定义 -线型由 “线+缺口+线+缺口+线+缺口……”
组成，如：“6pt 3pt”。cellBorderColorStringnull单元格边框颜色，支持CSS中颜色定义规范,如： “#fff”, “#f2f2f2”, “rgb(255,255,0)”, “rgba(255,255,0,125)”cellHAlignString“left”单元格水平对齐，有效值如下： 居左 - left 居中 - center 居右 - rightcellVAlignString“middle”单元格垂直对齐，有效值如下： 置顶 - top 中间 - middle 或 center 置底 - bottomcellPaddingStringnull单元格内边距，类似CSS中padding，如： "1pt 2pt 3pt 4pt"表示上右下左的内边距 分别为1pt、2pt、3pt、4pt；hRelativeToStringnull水平位置相对于，可选值为: 相对于前面的打印项 - pre 线对于指定打印项 - #+打印项名称，如：“#text1”vRelativeToStringnull垂直位置相对于，可选值为: 相对于前面的打印项 - pre 线对于指定打印项 - #+打印项名称，如：“#text1”fixedBooleanfalse是否在每页重复出现，当设置为true时，该打印项会出现在每页的相应位置，可以实现诸如水印等特殊业务场景。

表格行属性列表

属性名类型默认值说明cellsTableCell[]null表体，TableCell数组，TableCell属性参见6.10.4表格行属性列表。rowHeightStringnull行高，默认单位毫米(mm), 支持单位及单位换算参见"x"属性。fontNameStringnull字体名称，如:"宋体"等fontStyleStringnull字体风格，支持如下风格：
普通 - plain
粗体 - bold
斜体 - italic
可以设置多个风格，风格之间用"|"分割，
如：“bold|italic”fontSizeStringnull字体大小，默认单位厘米(mm) 支持单位及单位换算参见"x"属性。colorStringnull文本颜色，支持CSS中颜色定义规范,如： “#fff”, “#f2f2f2”, “rgb(255,255,0)”, “rgba(255,255,0,125)”backgroundColorStringnull文本描边颜色，支持CSS中颜色定义规范， 参见color属性。cellBorderStringnull单元格边框，类似css中的border属性，如： "1mm 2mm 3mm 4mm"表示 上边宽1mm，右边宽2mm，底边宽3mm， 左边宽4mmcellBorderDashStringnull单元格边框线型，默认null表示实线，可以分别指定每个边
的线型，如：
“dash dot-dash dash dot-dash”
表示上边为虚线，右边为点划线，底边为虚线，
左边为点划线。也可指定所有边为统一的线型，如：
"dash"所有边为虚线。
线型有效值如下：
solid - 实线
dotted - 点线
dashed - 虚线
dot-dash - 点划线
double-dot-dash - 双点划线
自定义 -线型由 “线+缺口+线+缺口+线+缺口……”
组成，如：“6pt 3pt”。cellBorderColorStringnull单元格边框颜色，支持CSS中颜色定义规范,如： “#fff”, “#f2f2f2”, “rgb(255,255,0)”, “rgba(255,255,0,125)”cellHAlignString“left”单元格水平对齐，有效值如下： 居左 - left 居中 - center 居右 - rightcellVAlignString“middle”单元格垂直对齐，有效值如下： 置顶 - top 中间 - middle 或 center 置底 - bottomcellPaddingStringnull单元格内边距，类似CSS中padding，如： "1pt 2pt 3pt 4pt"表示上右下左的内边距 分别为1pt、2pt、3pt、4pt；

表格单元格属性列表

属性名类型默认值说明itemsItem[]null单元格内容，有效值为打印项数组,如：
[{itemType:“text”,text:“文本内容”}]colSpanInteger1单元格横跨的列数。rowSpanInteger1单元格横跨的行数。textString“”需要打印的文本内容fontNameStringnull字体名称，如:"宋体"等fontStyleStringnull字体风格，支持如下风格：
普通 - plain
粗体 - bold
斜体 - italic
可以设置多个风格，风格之间用"|"分割，
如：“bold|italic”fontSizeStringnull字体大小，默认单位厘米(mm) 支持单位及单位换算参见"x"属性。colorStringnull文本颜色，支持CSS中颜色定义规范,如： “#fff”, “#f2f2f2”, “rgb(255,255,0)”, “rgba(255,255,0,125)”outlineColorStringnull文本描边颜色，支持CSS中颜色定义规范， 参见color属性。underlineString“none”文本下是否带划线，
有效值如下：
none - 无
solid - 实线
dotted - 点线
dashed - 虚线
dot-dash - 点划线
double-dot-dash - 双点划线strikethroughString“none”文本是否有删除线，
有效值如下：
none - 无
solid - 实线
dotted - 点线
dashed - 虚线
dot-dash - 点划线
double-dot-dash - 双点划线roateFloat0文本旋转角度autoWapBooleantrue文本自动换行lineSpacingStringnull行间距，默认单位厘米(mm) 支持单位及单位换算参见"x"属性。letterSpacingStringnull字间距，默认单位厘米(mm) 支持单位及单位换算参见"x"属性。readDirectionString“LTR”文本阅读方向，可选值如下:
从左往右 - LTR
从右往作 - RTL
从上往下 - TTB
从下往上 - BTThAlignString“left”水平对齐，有效值如下： 居左 - left 居中 - center 居右 - rightvAlignString“middle”垂直对齐，有效值如下： 置顶 - top 中间 - middle 或 center 置底 - bottomlineBasedAlignBooleantrue是否按行处理对齐autoScaleString“none”自动缩放，可自动依据显示空间调整字体大小，
可选值如下:
无缩放 - none
缩小适应 - down
放大适应 -up
自动适应 - autobackgroundColorStringnull文本描边颜色，支持CSS中颜色定义规范， 参见color属性。backgroundImageStringnull背景图片地址，支持base64和其他标准urlborderStringnull单元格边框，类似css中的border属性，如： "1mm 2mm 3mm 4mm"表示 上边宽1mm，右边宽2mm，底边宽3mm， 左边宽4mmborderDashStringnull单元格边框线型，默认null表示实线，可以分别指定每个边
的线型，如：
“dash dot-dash dash dot-dash”
表示上边为虚线，右边为点划线，底边为虚线，
左边为点划线。也可指定所有边为统一的线型，如：
"dash"所有边为虚线。
线型有效值如下：
solid - 实线
dotted - 点线
dashed - 虚线
dot-dash - 点划线
double-dot-dash - 双点划线
自定义 -线型由 “线+缺口+线+缺口+线+缺口……”
组成，如：“6pt 3pt”。borderColorStringnull单元格边框颜色，支持CSS中颜色定义规范,如： “#fff”, “#f2f2f2”, “rgb(255,255,0)”, “rgba(255,255,0,125)”paddingStringnull内边距，类似CSS中padding，如： "1pt 2pt 3pt 4pt"表示上右下左的内边距 分别为1pt、2pt、3pt、4pt；

示例代码

//create print jobvar job = Kaop.createPrintJob("Design Print Job");//pages//the page 0
job.addTable("表格_5","20.108","26.458","166.158","188.912");
job.setItemAttr("表格_5","numberOfColumns",3);
job.setItemAttr("表格_5","head",[{"cellHAlign":"center","cellVAlign":"middle","backgroundColor":"#e3e3e3","cells":[{"text":"列1"},{"text":"列2"},{"text":"列3"}]}]);
job.setItemAttr("表格_5","body",[{"cells":[{},{},{}]},{"cells":[{},{},{}]},{"cells":[{},{},{}]},{"cells":[{},{},{}]},{"cells":[{},{},{}]},{"cells":[{},{},{}]},{"cells":[{},{},{}]},{"cells":[{},{},{}]},{"cells":[{},{},{}]},{"cells":[{},{},{}]},{"cells":[{},{},{}]},{"cells":[{},{},{}]},{"cells":[{},{},{}]},{"cells":[{},{},{}]},{"cells":[{},{},{}]},{"cells":[{},{},{}]},{"cells":[{},{},{}]},{"cells":[{},{},{}]},{"cells":[{},{},{}]},{"cells":[{},{},{}]}]);
job.setItemAttr("表格_5","foot",[{"cellHAlign":"center","cellVAlign":"middle","backgroundColor":"#e3e3e3","cells":[{"text":"表脚","colSpan":3}]}]);//actions
job.preview();

预览效果