Flowable 快速入门教程：前端展示流程图

Love The Way You Lie 2023-07-11 11:29 130阅读 0赞

### Flowable 快速入门教程：流程图展示 ###

*  后端
 *  前端
 *  效果图

# 后端 #

这里流程图就不做高亮处理了

1.  获取流程图 `InputStream`
2.  将 `InputStream` 转为 `byte[]` 字节数组
3.  对数组进行 `Base64` 编码处理，将结果返回前端

/** * 获取流程图 * @param processDefinedId */
    @GetMapping(value = "/getFlowDiagram/{processDefinedId}")
    public ErrorMsg getFlowDiagram(@PathVariable(value = "processDefinedId") String processDefinedId) throws IOException { 
        List<String> flows = new ArrayList<>();
        //获取流程图
        BpmnModel bpmnModel = repositoryService.getBpmnModel(processDefinedId);
        ProcessEngineConfiguration processEngineConfig = processEngine.getProcessEngineConfiguration();
    
        ProcessDiagramGenerator diagramGenerator = processEngineConfig.getProcessDiagramGenerator();
        InputStream in = diagramGenerator.generateDiagram(bpmnModel, "bmp", new ArrayList<>(), flows, processEngineConfig.getActivityFontName(),
                processEngineConfig.getLabelFontName(), processEngineConfig.getAnnotationFontName(), processEngineConfig.getClassLoader(), 1.0, true);
    
        // in.available()返回文件的字节长度
        byte[] buf = new byte[in.available()];
        // 将文件中的内容读入到数组中
        in.read(buf);
        // 进行Base64编码处理
        String base64Img =  new String(Base64.encodeBase64(buf));
        in.close();
        return ErrorMsg.PREVIEW_SUCCESS.setNewData(base64Img);
    }

# 前端 #

在返回值前面拼接 `data:image/png;base64,` ，放入 `src` 中即可

<img :src="imgSrc">
    
    this.imgSrc = 'data:image/png;base64,' + response.data

# 效果图 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTQzNjcz_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTQzNjcz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200305160916649.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTQzNjcz,size_16,color_FFFFFF,t_70