打印表格教学视频（Kaop打印项之表格）

时间2025-05-02 23:46:38分类IT科技浏览3858

导读：表格功能说明...

表格

功能说明

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

表格属性列表

属性名类型默认值说明 name String “ ” 打印项的名称，在打印任务内应该唯一。 label String “ ” 打印项的标题，打印设计或维护时，可以更好的了解打印项代表的含义。 x String 0 左边缘相对于打印区域的位置，默认单位毫米(mm) ，

可用单位:

毫米 - mm ，如：“10mm ”

厘米 - cm ，如：“1cm ”

点 - pt ，如：“16pt ”

英寸 - in ，如：“1in ”

派卡 - pc ，如：“2pc ”

像素 - px，如：“10px ”

单位换算关系:

1in = 2.54cm = 25.4 mm = 72pt = 6pc=96px ，

同时支持百分比，如：“20% ”,表示占父容器可

用宽度的20%的位置。 y String 0 上边缘相对打印区域的位置，默认单位毫米(mm),

支持单位及单位换算参见"x"属性，同时支持百分比，

如：“20% ”,表示占父容器可用高度的20%的位置。 width String null 宽度，默认单位毫米(mm),

支持单位及单位换算参见"x"属性，同时支持百分比，

如：“20% ”,表示占父容器可用宽度的20% 。 height String null 高度，默认单位毫米(mm),

支持单位及单位换算参见"x"属性，同时支持百分比，

如：“20% ”,表示占父容器可用高度的20% 。 zindex Integer 0 打印项所在图层，图层数值大的打印项会遮挡

图层数值小的打印项。 columns String[] null 表格的列，如：[“10mm”,“20mm ”,“30mm ”],列宽支持单位及单位换算参见"x"属性，同时支持百分比，如：“20%”,表示占表格可用宽度的20% 。 numberOfColumns Integer 1 表格的列数，当columns属性为null时有效，每列宽度为表格宽度/列数。 rowHeight String null 默认行高，默认单位毫米(mm), 支持单位及单位换算参见"x"属性。 fontName String null 字体名称，如:"宋体"等 fontStyle String null 字体风格，支持如下风格：

普通 - plain

粗体 - bold

斜体 - italic

可以设置多个风格，风格之间用"|"分割，

如：“bold|italic ” fontSize String null 字体大小，默认单位厘米(mm) 支持单位及单位换算参见"x"属性。 color String null 文本颜色，支持CSS中颜色定义规范,如： “#fff ”, “#f2f2f2 ”, “rgb(255,255,0) ”, “rgba(255,255,0,125) ” paginate Boolean false 是否分页 headPerPage Boolean true 每页显示表头 head TableRow[] null 表头，TableRow数组，TableRow属性参见6.10.3表格行属性列表。 body TableRow[] null 表体，TableRow数组，TableRow属性参见6.10.3表格行属性列表。 foot TableRow[] null 表脚，TableRow数组，TableRow属性参见6.10.3表格行属性列表。 backgroundColor String null 文本描边颜色，支持CSS中颜色定义规范，参见color属性。 border String null 边框，类似css中的border属性，如： "1mm 2mm 3mm 4mm"表示上边宽1mm，右边宽2mm ，底边宽3mm ，左边宽4mm borderDash String null 边框线型，默认null表示实线，可以分别指定每个边

的线型，如：

“dash dot-dash dash dot-dash ”

表示上边为虚线，右边为点划线，底边为虚线，

左边为点划线。也可指定所有边为统一的线型，如：

"dash"所有边为虚线。

线型有效值如下：

solid - 实线

dotted - 点线

dashed - 虚线

dot-dash - 点划线

double-dot-dash - 双点划线

自定义 -线型由 “线+缺口+线+缺口+线+缺口…… ”

组成，如：“6pt 3pt ” 。 borderColor String null 边框颜色，支持CSS中颜色定义规范,如： “#fff ”, “#f2f2f2 ”, “rgb(255,255,0) ”, “rgba(255,255,0,125) ” margin String null 外边距，类似CSS中margin，如： "1pt 2pt 3pt 4pt"表示上右下左的外边距分别为1pt 、2pt 、3pt 、4pt； cellBorder String null 单元格边框，类似css中的border属性，如： "1mm 2mm 3mm 4mm"表示上边宽1mm，右边宽2mm ，底边宽3mm ，左边宽4mm cellBorderDash String null 单元格边框线型，默认null表示实线，可以分别指定每个边

的线型，如：

“dash dot-dash dash dot-dash”

表示上边为虚线，右边为点划线，底边为虚线，

左边为点划线。也可指定所有边为统一的线型，如：

"dash"所有边为虚线。

线型有效值如下：

solid - 实线

dotted - 点线

dashed - 虚线

dot-dash - 点划线

double-dot-dash - 双点划线

自定义 -线型由 “线+缺口+线+缺口+线+缺口…… ”

组成，如：“6pt 3pt ” 。 cellBorderColor String null 单元格边框颜色，支持CSS中颜色定义规范,如： “#fff”, “#f2f2f2 ”, “rgb(255,255,0) ”, “rgba(255,255,0,125) ” cellHAlign String “left ” 单元格水平对齐，有效值如下：居左 - left 居中 - center 居右 - right cellVAlign String “middle ” 单元格垂直对齐，有效值如下：置顶 - top 中间 - middle 或 center 置底 - bottom cellPadding String null 单元格内边距，类似CSS中padding ，如： "1pt 2pt 3pt 4pt"表示上右下左的内边距分别为1pt 、2pt 、3pt 、4pt； hRelativeTo String null 水平位置相对于，可选值为: 相对于前面的打印项 - pre 线对于指定打印项 - #+打印项名称，如：“#text1 ” vRelativeTo String null 垂直位置相对于，可选值为: 相对于前面的打印项 - pre 线对于指定打印项 - #+打印项名称，如：“#text1 ” fixed Boolean false 是否在每页重复出现，当设置为true时，该打印项会出现在每页的相应位置，可以实现诸如水印等特殊业务场景。

表格行属性列表

属性名类型默认值说明 cells TableCell[] null 表体，TableCell数组，TableCell属性参见6.10.4表格行属性列表。 rowHeight String null 行高，默认单位毫米(mm), 支持单位及单位换算参见"x"属性。 fontName String null 字体名称，如:"宋体"等 fontStyle String null 字体风格，支持如下风格：

普通 - plain

粗体 - bold

斜体 - italic

可以设置多个风格，风格之间用"|"分割，

如：“bold|italic ” fontSize String null 字体大小，默认单位厘米(mm) 支持单位及单位换算参见"x"属性。 color String null 文本颜色，支持CSS中颜色定义规范,如： “#fff ”, “#f2f2f2 ”, “rgb(255,255,0) ”, “rgba(255,255,0,125) ” backgroundColor String null 文本描边颜色，支持CSS中颜色定义规范，参见color属性。 cellBorder String null 单元格边框，类似css中的border属性，如： "1mm 2mm 3mm 4mm"表示上边宽1mm ，右边宽2mm ，底边宽3mm ，左边宽4mm cellBorderDash String null 单元格边框线型，默认null表示实线，可以分别指定每个边

的线型，如：

“dash dot-dash dash dot-dash”

表示上边为虚线，右边为点划线，底边为虚线，

左边为点划线。也可指定所有边为统一的线型，如：

"dash"所有边为虚线。

线型有效值如下：

solid - 实线

dotted - 点线

dashed - 虚线

dot-dash - 点划线

double-dot-dash - 双点划线

自定义 -线型由 “线+缺口+线+缺口+线+缺口…… ”

表格单元格属性列表

属性名类型默认值说明 items Item[] null 单元格内容，有效值为打印项数组,如：

[{itemType:“text ”,text:“文本内容 ”}] colSpan Integer 1 单元格横跨的列数。 rowSpan Integer 1 单元格横跨的行数。 text String “ ” 需要打印的文本内容 fontName String null 字体名称，如:"宋体"等 fontStyle String null 字体风格，支持如下风格：

普通 - plain

粗体 - bold

斜体 - italic

可以设置多个风格，风格之间用"|"分割，

有效值如下：

none - 无

solid - 实线

dotted - 点线

dashed - 虚线

dot-dash - 点划线

double-dot-dash - 双点划线 strikethrough String “none ” 文本是否有删除线，

有效值如下：

none - 无

solid - 实线

dotted - 点线

dashed - 虚线

dot-dash - 点划线

double-dot-dash - 双点划线 roate Float 0 文本旋转角度 autoWap Boolean true 文本自动换行 lineSpacing String null 行间距，默认单位厘米(mm) 支持单位及单位换算参见"x"属性。 letterSpacing String null 字间距，默认单位厘米(mm) 支持单位及单位换算参见"x"属性。 readDirection String “LTR” 文本阅读方向，可选值如下:

从左往右 - LTR

从右往作 - RTL

从上往下 - TTB

从下往上 - BTT hAlign String “left ” 水平对齐，有效值如下：居左 - left 居中 - center 居右 - right vAlign String “middle ” 垂直对齐，有效值如下：置顶 - top 中间 - middle 或 center 置底 - bottom lineBasedAlign Boolean true 是否按行处理对齐 autoScale String “none ” 自动缩放，可自动依据显示空间调整字体大小，

可选值如下:

无缩放 - none

缩小适应 - down

放大适应 -up

自动适应 - auto backgroundColor String null 文本描边颜色，支持CSS中颜色定义规范，参见color属性。 backgroundImage String null 背景图片地址，支持base64和其他标准url border String null 单元格边框，类似css中的border属性，如： "1mm 2mm 3mm 4mm"表示上边宽1mm ，右边宽2mm ，底边宽3mm，左边宽4mm borderDash String null 单元格边框线型，默认null表示实线，可以分别指定每个边

的线型，如：

“dash dot-dash dash dot-dash ”

表示上边为虚线，右边为点划线，底边为虚线，

左边为点划线。也可指定所有边为统一的线型，如：

"dash"所有边为虚线。

线型有效值如下：

solid - 实线

dotted - 点线

dashed - 虚线

dot-dash - 点划线

double-dot-dash - 双点划线

自定义 -线型由 “线+缺口+线+缺口+线+缺口…… ”

组成，如：“6pt 3pt ” 。 borderColor String null 单元格边框颜色，支持CSS中颜色定义规范,如： “#fff ”, “#f2f2f2 ”, “rgb(255,255,0) ”, “rgba(255,255,0,125) ” padding String null 内边距，类似CSS中padding ，如： "1pt 2pt 3pt 4pt"表示上右下左的内边距分别为1pt 、2pt、3pt 、4pt；

示例代码

//create print job var 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();

打印表格教学视频（Kaop打印项之表格）

表格

功能说明

表格属性列表

表格行属性列表

表格单元格属性列表

示例代码

预览效果