实现流程明细表一键下载

title: 实现流程明细表一键下载 created: 2026-04-19 updated: 2026-04-19 type: reference tags: [imported, pptx] source: "Weaver Doc Import"

Slide 1

实现流程明细表一键下载泛微网络培训服务中心

Slide 2

需求背景及实现效果

Slide 3

在日常实操中，我们经常遇到这样的需求：业务人员处理指定流程时，需要导出完整的流程明细用于数据核对，但是系统标准功能中却没有原生的一键下载功能，只能手动复制粘贴明细内容，这样就会导致操作繁琐又极易出错，这类诉求在各类审批流程、业务流程中尤为常见。

Slide 4

在表单中输入明细表的相关内容，点击“下载明细”按钮后，可将明细表内容全部导出；注：下载前务必保存表单，未保存会弹窗提示，保存后即可正常下载。实现效果

Slide 5

实现思路

Slide 6

实现思路 🔧 全局总控：enable = true 开启功能，改为false即可一键关闭，灵活可控； 🔧 精准配置：workflowidArr = [181] 是生效流程白名单，新增流程仅需追加 ID； 🔧 智能校验：代码自动识别页面、校验表单保存状态，无效操作全拦截； 🔧 一键下载：点击按钮自动拼接流程参数，调用系统接口完成文件导出。

Slide 7

JS代码块应用样例

Slide 8

配置实现步骤登录sysadmin账号，进入组织权限中心-权限管理-角色设置，新建“ecode管理员”角色，为该角色添加“前端在线开发权限”，再添加对应成员即可。新建角色

Slide 9

配置实现步骤直接在OA地址后拼接“/ecode”，就能进入ecode平台进行操作；默认目录下新建文件夹，在新建的文件夹新建JS文件；将修改好的代码块复制到JS文件中后，保存即可。 Ecode平台部署代码步骤直接在OA地址后拼接“/ecode”，就能进入ecode平台进行操作；默认目录下新建文件夹，在新建的文件夹新建JS文件；将修改好的代码块复制到JS文件中后，保存即可。 Ecode平台部署代码### Slide 10 代码示例 // 功能总开关：true开启 / false关闭，支持一键启停 let enable = true; // 生效流程白名单：配置需要开启下载功能的流程ID，支持多ID配置 [181,182,183] let workflowidArr = [181,335]; // 覆写流程顶部操作栏组件，注入自定义下载按钮 ecodeSDK.overwritePropsFnQueueMapSet('WeaReqTop', { // 目标组件名：流程顶部操作栏 fn: (newProps) => { // newProps：组件原生参数对象 if (!enable) return; // 功能开关关闭则直接退出 const { hash } = window.location; if (!hash.startsWith('#/main/workflow/req')) return; // 校验：仅流程表单页生效 if (!ecCom.WeaTools.Base64) return; // 校验：组件库加载完成 if (!WfForm) return; // 校验：表单核心SDK加载完成 // 获取当前流程基础信息（流程ID、表单ID、节点ID） const baseInfo = WfForm.getBaseInfo(); const { workflowid } = baseInfo; if (workflowidArr.indexOf(workflowid) < 0) return; // 校验：仅白名单流程生效 // 引入AntD按钮组件，创建下载按钮（原生样式，与系统统一） const { Button } = antd;

Slide 11

代码示例 const downloadBtn = ( { downloadFile(baseInfo); }}> 下载明细 ); newProps.buttons.push(downloadBtn); // 将按钮注入顶部操作栏按钮组 }, order: 999, // 执行优先级：999为最高，确保按钮不被原生组件覆盖 desc: '流程表单增加明细一键下载按钮-提效功能' }); // 核心下载方法：处理下载逻辑+前置校验 const downloadFile = (baseInfo) => { // 关键校验：requestid=-1 代表表单未保存，拦截并弹窗提示 if (baseInfo.requestid == -1) { WfForm.showMessage("请先保存流程表单！"); return; } // 拼接下载接口地址，传入流程核心参数（表单ID/流程ID/节点ID） const downloadUrl = /api/workflow/reqform/dowloadTemplate?requestid=${baseInfo.requestid}&workflowid=${baseInfo.workflowid}&nodeid=${baseInfo.nodeid}; window.location.href = downloadUrl; // 跳转接口触发浏览器原生下载 }; Info.workflowid}&nodeid=${baseInfo.nodeid}`; window.location.href = downloadUrl; // 跳转接口触发浏览器原生下载 };### Slide 12 1、新增流程生效：在workflowidArr数组中追加 ID 即可，例：[181, 190, 205]； 2、功能临时关闭：将enable改为false，排查问题后改回true即可恢复； 3、按钮样式修改：调整Button的type属性（primary/ghost/default），切换按钮样式； 4、部署位置：直接复制至泛微ecode平台部署，修改流程ID即可生效。补充说明

Slide 13

志达宇泛见著于微感谢您的信任与支持！我们始终努力提供好用的移动办公平台