Kaop打印项之表格

发布时间：2023-05-22 文章分类：WEB开发, 电脑百科 投稿人：赵颖 字号： 默认 | 大 | 超大 打印

表格

功能说明

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

表格属性列表

属性名 类型 默认值 说明
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();

预览效果

Kaop打印项之表格

标签 , ,