Files
wukuang/packages/print-webapp/表单-打印模块需求文档.md
T
2026-05-23 14:05:22 +08:00

424 lines
17 KiB
Markdown

# 打印模块需求
## 1. 业务背景
本次打印模版的功能为应用开发平台的打印模块,以“所见即所得”的设计理念,打造可视化、高复用、强适配的打印模板体系,覆盖表单套打、批量打印、二维码打印等核心业务场景,降低企业用户打印模板的配置成本,提升打印效率,适配多场景的企业打印需求,进一步强化平台的业务支撑能力,助力企业实现全链路数智化转型。核心功能是提供可视化打印模板配置、文档类/套打类两种打印模式,支持主表/子表数据绑定、分页控制、精准定位等能力,无需编码即可实现各类单据(普通文档、预印制单据)的灵活打印,适配业务平台“拖拽式、可视化”的核心特点,满足多业务场景的打印需求。
## 2. 功能现状及期望
### 2.1 现状
目前已有一套基于word、excel为模版的打印管理功能。
### 2.2 期望
• 提供可视化模板设计器,支持模板创建、编辑、复制、删除,支持主表/子表字段绑定、样式配置、坐标微调,降低模板配置门槛;
• 实现打印核心逻辑,支持预览、全局水印,保证打印效果精准、交互流畅;
• 尽可能与现有的打印管理功能进行融合;
## 3. 当前需求目标
### 3.1 需求范围
打印设计器分4块区域,分别为
• 控件区:提供可用于打印的字段控件,包括业务字段、流程字段(流程表单独有)、系统字段、其他字段;
• 工具栏:用于设置画布单元格字体样式、绘画表格、合并单元格等;
• 画布设计区:设计打印模板的绘画区域,从控件区域拖入字段,通过工具栏调整选中单元格的样式;
• 属性区:模板全局属性设置和部分控件字段属性设置;
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/-i85gOArz3narFTeVtebznhbh2LEy7aOPmGfNttIDnI.png)
## 4. 核心功能需求
### 4.1 设计态
#### 4.1.1 打印页面设计器入口
由于平台已有【打印管理】功能,本次新增打印页面模版,尽可能与现有功能融合。
在【开发平台】\-【打印管理】--【打印配置】--在列表中新增打印配置模板。
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/5Tb0dfMAu8bwwSd_A0yIcoK71UYw1XC0b1kMRK9NBA0.png)
点击【打印配置】,打开可视化“打印页面设计器”。
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/aef-neouVWdQW960MWnI7NZ0G-QLRh7DRm-m6j6ftYY.png)
#### 4.1.3 打印页面设计器
设计器分4块区域,分别为
控件区:提供可用于打印的字段控件,包括业务字段、流程字段(流程表单独有)、系统字段、其他字段;
• 工具栏:用于设置画布单元格字体样式、绘画表格、合并单元格等;
• 画布设计区:设计打印模板的绘画区域,从控件区域拖入字段,通过工具栏调整选中单元格的样式;
• 属性区:模板全局属性设置和部分控件字段属性设置;
#### 4.1.4 模板设置
##### 打印类型
在制作打印模板前,首先需要明确打印类型,选择文档类或套打类其中一种
##### 文档类
• 适用于打印合同文档等,打印字段文本内容根据实际数据内容自适应行高(自动换行打印完整文本内容)子表数据也是根据实际行数打印所有子表行;
##### 套打类
• 适用于打印单据,如快递单、财务收据等,字段文本内容在固定区域内打印,超出区域自动截断,子表数据按模板设置的子表行数打印,超出子表行数换下一页接着打印,主表字段内容将在每一页重复打印;
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/GVUSDMlvbAk6fo9yRAwz6_3mfWQxEVKa_76dKUhzogo.png)
##### 打印模式
##### 分页打印
默认模式,每条数据单独打印
##### 连续打印
可在一张纸上连续打印多条数据
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/xFEqc1eVpSNg3EfSSiRv0mXD57OIBhkMA55a9x9GGPg.png)
##### 纸张大小
设置纸张大小、方向、页边距。
系统预设常用的几种纸张大小,如需自定义纸张尺寸,选择自定义后,再设置宽和高;
纸张的宽高尺寸 减去 页边距上下左右尺寸,即为画布的可用区域尺寸,如纸张宽是210mm,左右边距各17mm,则画布可用区域宽为176mm;
默认设置A4、A5、B3、B4、B5、自定义(设置宽高)
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/dExBp9ta3p-aktANIWplDhjDyvD1xO43ufKndg_y-88.png)
##### 纸张方向
分为纵向、横向
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/77VpuGLYvzXHXoPu8rxS4fwnfMM054DUxaY7cmG1pjI.png)
##### 页边距
打印内容与纸张边缘的距离,分为上、下、左、右四个独立边距(单位:mm)
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/kForOQYPZOZwmS2igdUchRLQKIPFSeC6hj8O2X_gDFU.png)
##### 页眉页脚
点击设置,打开新弹窗,整屏显示
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/raTfoCiRywfqJh-5bs0j-e5H0mLuBb4LpuGEYDTJdy8.png)
右上角关闭,通过字段设置页眉页脚内容,上下都均分3块
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/7cmB3PdmbM99pmZchrz7iQ52IYsRE-QqZljmN77T-eI.png)
##### 背景图
上传本地图片(jpg、png)后可勾选是否打印背景的选择,未上传图片不能勾选
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/LjtIdslY9oONiJR3vGGbniUniVGPQFh0_C3sOpvYO5g.png)
##### 全局水印
##### 开关按钮,默认关闭
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/1xnjBT1NVmaTF8HzR_D7brOjh4C0wNnwkU9KXmK9oO4.png)
##### 打开后字段
水印内容:输入框,默认水印内容调取【用户姓名】【手机号后四位】,限制100个文字,允许自定义输入内容,可允许在下方+选择预存当前账号的(用户姓名、手机号后四位、用户账号、手机号、用户主部门、用户所在组织、日期)
• 水印字体大小:下拉框,默认20,预设10-50的偶数
• 水印字体颜色:打开调色漆选择颜色
• 水印不透明度:横向拉条,默认50%
• 水印角度:横向拉条,默认45
• 水印密度:单选,选择类型:密集、标准、稀疏,默认标准
• 水印排列:单选,选择类型:规整、交错,默认规整
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/EgkkPa7xTB1kRqpUnmWC_N1mcZTCtbLrrwHR5Nsj670.png)
#### 4.1.5 画布打印区
#### 边界线
• 画布根据纸张大小和页边距自动计算可打印区域,被打印的内容必须完全处在于白色底色区域内,灰色区域为不可打印,确保有内容的行或列不要同时位于白色和灰色区域中,否则将导致该行或列无法正常打印内容;
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/z4Tb_uVEyOJ217E2gR_sfwmA7RBeN4ox0V25bnvEb6c.png)
#### 新增页面
• 初始默认打印区为一页纸,鼠标右键点击画布最左侧的序号列,弹出菜单,点击【新增页】,在当前打印下面增加一页打印区
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/AguktHUU3khfSxf2vFfVh1UGQEpRukIlUeRluSEqaOY.png)
#### 删除分页
• 点击分页右侧的删除图标进行删除当前页
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/IVEaeGr0yBIMw5LRryhXR0NffaT8l0zy8YPyPEbCL2s.png)
#### 新增和删除sheet分页
• 点击+新增一个sheet页,在当前打印下面增加一页打印区,点击sheet名称后的删除图标,可删除当前页
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/RqUQR8f7t_1FJtAaGfsGBP8cSTyDBcboeKE-WWFuf4Q.png)
### 4.1.6 字段控件
从控件区域拖入需要打印的字段控件;大部分控件类型包括字段名和字段值两部分,拖入后并排占用2个单元格,字段名可编辑或删除;也有少数字段只占用1个单元格或多个单元格,如二维码、条形码占用1个单元,子表和流程日志则占用多行单元格;
#### 普通字段
大部分字段控件只需要拖入设计好的画布表格中即可,少部分字段控件在拖入画布后需设置字段属性或调整布局
##### 1、子表
• 子表拖入画布,可选择要显示子表哪些列
• 需要注意子表列不要超出灰色不可打印区域,故需要调整子表布局,如在纸张大小固定的情况下,减少打印的子表字段
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/kDxBRircc-8zH3n-VkKu-NP_Rxlbglzhk7rdgGW_Sx8.png)
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/Xkrybe452x3BLRxrfk5hsosv-m-nIQllbW-wH7uTvH8.png)
• 调整列宽,让子表所有字段都在打印区域内
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/BC2KEYVmPuD5VwTL0xnh7d4DRULx0mc9WjyKTENWpks.png)
• 选择不需要打印的字段列,清空内容
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/w2WhZhEmmdXtegRpKzg-DN-mqYPMMvfC7xKCsM9CEB8.png)
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/DpmSis0G751kZWjmQVRA6dWAYXVLO-sdJ2nBFrysrwc.png)
• 往左拖动子表边框,让整个子表都处在于打印区域内
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/1VkPcVQabzaDzbvn-hKTe7AuH7_g3iJWeXda_Es2VCM.png)
• 子表蓝色边框内为循环体,即循环打印子表
文档类打印的循环体下一行可以放其他字段,打印时会自动把子表以下的字段往下移;
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/ARIVfZW0FdlcWizY5vULKkwQ4iOKxvfapZZvZ2TgJvQ.png)
套打类子表需要设置每一页的打印子表行数,打印数据时子表超出行数则自动换页接着打印,如一条数据有12行子表数据,套打每页3行,则最终会被打印成4页,主表字段内容在每一页重复打印;
而套打类的根据设置的子表打印行数需要预留足够空白行用于打印子表数据,否则打印时内容会被覆盖;
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/56IsAiNs9GlYKzfITqaJGJS4ckub4ueXxMiH4wNzKJs.png)
移动/删除/编辑子表
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/QhXO8CmCNSAS3kx0HiW5HEVIatocx_dAgb8PxLSdbRo.png)
点击编辑,可打开弹窗编辑子表字段展示和顺序
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/jhW9DYVG8RavWcGyAx03Cp3Au8DAwVnH589Il8l7BYY.png)
##### 2、流程字段
###### 2.1. 流程日志
• 流程日志用于在流程表单中展示流程的进度。
流程日志的字段名和字段值绑定在循环体内,仅允许左右拖动增加列(用于合并单元格),右侧字段属性面板设置打印的字段列和节点类型;与子表类似,流程日志也是循环打印多行日志数据,故,需要区分文档打印和套打,套打需要设置打印流程日志行数,且需预留足够打印区域;文档打印则不需要;流程日志可选择打印的节点内容,及选择打印具体哪些节点、节点的什么意见;
流程日志字段属性中,支持:
• 选择打印的流程模板(针对模型下多流程的情况)
• 选择打印的节点内容,包括节点名称、接收时间、完成时间、耗时、参与者、操作等字段
• 选择要打印的节点,展示所有用户活动节点
• 选择打印的节点意见,默认打印流程中所有节点的所有意见
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/AZxvk9-DBIYo8Uec4CC35gefzJ_HmNA9KCrbCvTzujI.png)
如:财务管理人员想要打印本月的报销申请单,且打印的时候只显示财务总监、总经理等审批通过的审批意见,其他的不打印,则可仅选择“财务总监、总经理”的节点,选择意见“打印所有审批通过的意见”
###### 2.2 流程印章
流程印章展示当前流程的状态
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/BlTDiyQ8Qfz11J4zpzekvAIBDvOGLSVtisMyyyDx6p8.png)
###### 2.3 自定义流程日志
自定义流程日志用于打印单个节点的流程审批信息及意见。
自定义流程日志可选择打印的节点内容,及选择打印哪些具体节点、节点的什么意见
自定义流程日志字段属性中,支持:
• 选择打印的流程模板(针对模型下多流程的情况)
• 选择要打印的节点,展示所有用户活动节点
• 选择要打印的节点内容,包括节点名称、接收时间、完成时间、耗时、参与者、操作等字段
• 选择打印的节点意见,默认打印流程中所有节点的所有意见
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/0qpF4yopg-gcT5Wq2TPYtfEgHkIibVpBtpE-iwLCG4c.png)
实现效果
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/cpLuqpU1tA-UNXHcwmSNs_b4BaPYLykNXQgFEL8i_4s.png)
##### 3、系统字段
显示模型下所有的系统字段,拖入画布设计即可
##### 4、其他字段
###### 1. 图片:固定图片上传,可用于公司商品logo等
###### 2. 富文本:以富文本形式编辑内容,可输入或选择业务字段、系统字段等使用,可设置字体的颜色、样式等。
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/Y56APL2ziOr0d7FA4LpwSJVipKD-FjYJLIJRd7V2FZM.png)
###### 3. 二维码
◦ 数据查看二维码:打印后用户扫描可新增数据
◦ 数据新增二维码:打印后用户扫描可查看数据
◦ 表单字段生成:支持选择一个或多个字段组合
◦ 自定义内容生成:需输入内容
◦ 外链查看二维码:打印后支持外链用户查看数据
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/3q0FwMGjOj6y_OOlKSvlEJ_p8r_kwwGTTxTh4uyhKQQ.png)
###### 4. 条形码
◦ 表单字段生成:支持选择一个或多个字段组合
◦ 自定义内容生成:需输入内容
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/du0ipahaecDGVU0mMUwV9rf2QwQFJ8yGSqzo-TNwVyU.png)
##### 5.1.7 单元格设置
###### 设置行高/列宽
方式一:选中单元格,鼠标右键点击弹出菜单,输入行高/列宽值,点击菜单面板确定完成修改;
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/xfn1E1xL1k4L4wnOPaRWYQxFpfXA8cU6GJbzQYFCRI4.png)
方式二:鼠标拖动行或列的边线改变行高或列宽;
注意:需在行序号或列序号位置拖动,单元格内无法拖动;
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/W-sBBOZYE1_YfrZOe4Zvz8ObofZWYAm_DSzFxktwUi4.png)
方式三:批量修改行高或列宽;
鼠标左键长按选中多行或多列,右键点击弹出设置行高或列表菜单,修改数字后需点击菜单面板确定完成修改;
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/KCI1GjVsJhS5_7ocaDWKSHPRcWhH2-WLr9yBzRxi0EU.png)
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/BgqmifByCMotGqhOqA5IA4-pSMx_jtgN0x2NEMNhWZU.png)
###### 合并单元格
选中多个单元格,点击画布上方工具栏中的【合并单元格】菜单,完成合并操作,如再次点击则将已合并单元格拆分还原为多个单元格;
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/aI1JYU4aa9S-TF0SB9dRc5_DBC4OTxTVrh7XouFxIT8.png)
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/vv9wfr-z0kS3zARaOpy-DdwdzSzTMexKwejWyyb5rgU.png)
###### 设置内容样式
选中一个或多个单元格,点击画布上方工具栏中的文字样式菜单,设置单元格内的字体样式;
提供包括字号、字体、颜色、粗体、斜体、斜划线、垂直对齐方式(顶部对齐、垂直居中、底部对齐)、水平对齐方式(左对齐、居中、右对齐);
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/kLnchcVLxsUPrxAzZdlmb0t9xt2iOIw_pjwTzfAzEMg.png)
###### 边框设置
画布默认的网格线,打印数据时不会打印出来,如需打印表格,需选中单元格,设置边框线;
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/BZzy92YOuYciZBXD15BRZ1H6RhcbbHaWpDKRTrkdVN4.png)
##### 5.2 前台调用打印模板
###### 5.2.1 列表-批量打印
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/--P6z08Vb_d69QIWD09_H8iAudc6klXKsNJIV_AwmlQ.png)
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/ynXLdu1VzCPxdifojjooCabdt_oEYl1e1BDu7SiHznI.png)
###### 5.2.2 表单-打印
![](https://ones.cisdigital.cn/wiki/api/wiki/editor/SKG3mSQb/QT584BRe/resources/uW41zdFwK9LBx0WuUEJNSJVP7KUWaooQ8rvoph3nu2w.png)