Kaop打印项之表格

表格

功能说明

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

表格属性列表

属性名	类型	默认值	说明
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 - 双点划线自定义 -线型由 “线+缺口+线+缺口+线+缺口……” 组成，如：“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；

表格单元格属性列表

属性名	类型	默认值	说明
items	Item[]	null	单元格内容，有效值为打印项数组,如： [{itemType:“text”,text:“文本内容”}]
colSpan	Integer	1	单元格横跨的列数。
rowSpan	Integer	1	单元格横跨的行数。
text	String	“”	需要打印的文本内容
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)”
outlineColor	String	null	文本描边颜色，支持CSS中颜色定义规范，参见color属性。
underline	String	“none”	文本下是否带划线，有效值如下： 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();

预览效果

标签 key, 打印, 表格

发表回复取消回复

要发表评论，您必须先登录。

表格

功能说明

表格属性列表

表格行属性列表

表格单元格属性列表

示例代码

预览效果

发表回复 取消回复

发表回复取消回复