Flowable中查看当前流程图已到达节点(包含路径)，前后端实现

1、后端直接传入任务的ID

 /**
     * 查看当前流程图已到达节点(包含路径)
     */
    public String genProcessDiagrams(@RequestParam String taskId, HttpServletResponse httpServletResponse) throws IOException {
        String processId = taskService.createTaskQuery().taskId(taskId).singleResult().getProcessInstanceId();
        ProcessInstance pi = runtimeService.createProcessInstanceQuery().processInstanceId(processId).singleResult();
        HistoricProcessInstance his = historyService.createHistoricProcessInstanceQuery().processInstanceId(processId).singleResult();
        String pdi="";
        //流程走完的不显示图
        if (pi == null) {
            pdi=his.getProcessDefinitionId();
        }else {
            pdi=pi.getProcessDefinitionId();
        }
        if(pdi==""){
            return null;
        }
        //获得活动的节点
        List<HistoricActivityInstance> historyProcess =  historyService.createHistoricActivityInstanceQuery().processInstanceId(processId).orderByHistoricActivityInstanceStartTime().asc().list();
        List<String> activityIds = new ArrayList<>();
        List<String> flows = new ArrayList<>();
        //获取流程图
        BpmnModel bpmnModel = repositoryService.getBpmnModel(pdi);
        for (HistoricActivityInstance hi : historyProcess) {
            String activityType = hi.getActivityType();
            if (activityType.equals("sequenceFlow") || activityType.equals("exclusiveGateway")) {
                flows.add(hi.getActivityId());
            } else if (activityType.equals("userTask") || activityType.equals("startEvent")) {
                activityIds.add(hi.getActivityId());
            }
        }
        List<Task> tasks = taskService.createTaskQuery().processInstanceId(processId).list();
        for (Task task : tasks) {
            activityIds.add(task.getTaskDefinitionKey());
        }
        ProcessEngineConfiguration engConf = processEngine.getProcessEngineConfiguration();
        engConf.setActivityFontName("宋体");
        engConf.setLabelFontName("宋体");
        engConf.setAnnotationFontName("宋体");
        //定义流程画布生成器
        ProcessDiagramGenerator processDiagramGenerator = engConf.getProcessDiagramGenerator();
        InputStream in = processDiagramGenerator.generateDiagram(bpmnModel, "png", activityIds, flows, engConf.getActivityFontName()
                , engConf.getLabelFontName(), engConf.getAnnotationFontName(), engConf.getClassLoader(), 1.0, true);

        // 设置响应的类型格式为图片格式
        httpServletResponse.setContentType("image/png");
        //禁止图像缓存。
        httpServletResponse.setHeader("Pragma", "no-cache");
        httpServletResponse.setHeader("Cache-Control", "no-cache");
        httpServletResponse.setDateHeader("Expires", 0);

        String base64Img = null;
        try {
            // in.available()返回文件的字节长度
            byte[] buf = new byte[in.available()];
            // 将文件中的内容读入到数组中
            in.read(buf);
            // 进行Base64编码处理
            base64Img = new String(Base64Utils.encode(buf), StandardCharsets.UTF_8);
        }catch (IOException e){
            e.printStackTrace();
        } finally {
            if (in != null) {
                in.close();
            }
        }
        return base64Img;
    }

2、前端实现

 <div id="content36">
            <BoxHead title="流程审批跟踪" />
            <div style="text-align: center">
                <img :src="imgSrc" />
            </div>
        </div>
// 获取审批图
        genProcessDiagrams() {
            genProcessDiagramsApi({ taskId: this.taskIds })
                .then((res) => {
                    this.imgSrc = "data:image/png;base64," + res.data;
                })
                .catch((err) => {
                    if (+err.status === -1) {
                        this.handleMessage(err.statusText);
                    }
                });
        },