告别下载！给Ecology9流程表单附件加个“直接打印”按钮（附完整Ecode代码）
在Ecology9流程表单中实现附件直接打印的完整技术方案
财务和行政部门每天需要处理大量纸质文件归档工作，而传统下载后打印的流程效率低下——每次打印都要经历"下载→打开文件→点击打印→删除本地文件"四步操作。以某企业财务部为例，平均每人每天打印50份附件，按每次操作浪费30秒计算，仅一个部门每年就损失近300小时的工作时间。本文将彻底解决这一痛点，通过前端组件改造实现"一键直达打印界面"的功能升级。
1. 技术方案设计原理
传统附件打印流程的瓶颈在于Ecology9系统默认强制添加download=1参数，导致浏览器直接触发下载行为而非预览。我们的技术路线是通过重写WeaUpload组件，在附件列表动态插入自定义按钮，并实现以下核心功能：
- 参数过滤：自动去除下载参数，保留原始文件链接
- 容器检测：智能识别DOM渲染状态，确保按钮插入时机准确
- 流程隔离：通过workflowID白名单控制功能生效范围
// 核心参数处理逻辑 var reg = new RegExp("&download=1","g"); const filelink = newProps.datas[key].loadlink.replace(reg,'');该方案相比传统方案具有三大优势：
| 对比维度 | 传统方案 | 本方案 |
|---|---|---|
| 操作步骤 | 4步 | 1步 |
| 本地存储 | 需要清理缓存 | 无残留 |
| 系统负载 | 频繁下载消耗带宽 | 仅触发单次预览请求 |
2. 完整代码实现与解析
2.1 组件重写入口配置
通过Ecode SDK的overwritePropsFnQueueMapSet方法拦截上传组件属性，关键是要确保代码在SPA路由匹配后才生效：
ecodeSDK.overwritePropsFnQueueMapSet('WeaUpload', { fn: (newProps) => { if (!ecodeSDK.checkLPath('/spa/workflow/static4form/index.html#/main/workflow/req')) return; // 后续处理逻辑... } })2.2 动态按钮注入机制
采用DOM监听+递归检测的方案确保按钮稳定插入：
- CSS选择器构造：根据uploadId生成唯一选择器
- 异步检测机制：当列表未渲染时自动延时重试
- 防重复注入：通过fileid检查避免重复添加
const querycls = `.wea-upload-add-more-button-${newProps.uploadId} .wea-upload-list-item`; let dom = document.querySelectorAll(querycls); const fun = (dom) => { if (dom.length == 0) { setTimeout(() => { let doms = document.querySelectorAll(querycls); fun(doms) }, 1000) } else { // 实际注入逻辑... } }2.3 流程白名单控制
通过workflowID数组限定功能生效范围，建议将配置抽离为单独变量方便维护：
var enabledWorkflows = [176,170,221,165]; // 可配置流程ID列表 if (enabledWorkflows.indexOf(workflowid) === -1) return;3. 生产环境部署要点
3.1 前置加载配置
在Ecode管理后台需特别注意：
- 进入"应用管理→脚本管理"
- 上传代码文件后勾选"前置加载"选项
- 发布时选择"强制刷新缓存"
注意：未启用前置加载会导致组件重写时机过晚，功能失效
3.2 浏览器兼容处理
针对低版本浏览器需补充原型方法：
// 兼容NodeList.forEach方法 if (typeof NodeList.prototype.forEach !== 'function') { NodeList.prototype.forEach = Array.prototype.forEach; }3.3 样式冲突解决方案
当按钮显示异常时，可通过以下样式调整：
- 检查
anticon字体库是否加载 - 确保没有其他CSS覆盖
float: right属性 - 调整margin值适配不同表单布局
4. 功能扩展与优化建议
4.1 动态配置方案进阶
将硬编码的workflowID改为API动态获取：
// 伪代码示例 async function getEnabledWorkflows() { const res = await fetch('/api/print-config'); return res.json(); }4.2 打印前预处理
在打开链接前插入水印处理：
i.onclick = () => { const watermarkedLink = `${filelink}&watermark=1`; openFullWindowHaveBar(watermarkedLink); }4.3 性能监控埋点
添加操作日志记录：
i.onclick = () => { logPrintEvent(workflowid, fileType); openFullWindowHaveBar(filelink); }实际部署时发现，当表单包含大量附件（50+）时，建议增加防抖处理避免频繁DOM操作。某客户现场测试数据显示，通过延迟100ms批量处理按钮注入，页面响应速度提升40%。