后端

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

获取流程图 InputStream
将 InputStream 转为 byte[] 字节数组
对数组进行 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

效果图

Flowable 快速入门教程：前端展示流程图相关推荐

Flowable 快速入门教程：Flowable 入门开发案例，结合流程设计器详细讲解
Flowable 快速入门教程:Flowable 入门开发案例,结合流程设计器详细讲解前言流程设计器集成整体流程图流程节点说明第一审核人节点:实际设置审核人配置信息说明第二审核人:参数 ...
Flowable 快速入门教程：任务驳回与回退
Flowable 快速入门教程:任务驳回与回退前言 BUG 修复记录支持场景功能描述驳回退回脏数据什么是脏数据串行样例并行样例会签样例脏数据清洗效果图完整代码效果图前言本 ...
C#游戏开发快速入门教程Unity5.5教程
C#游戏开发快速入门教程Unity5.5教程试读文档下载地址:http://pan.baidu.com/s/1slwBHoD C#是微软发布的高级程序设计语言,这门语言和C语言一样,已经成为了大学计 ...
Activiti 快速入门教程：SpringBoot 集成 Activiti6 + Activiti Modeler 流程配置可视化
Activiti 快速入门教程:SpringBoot 集成 Activiti6 + Activiti Modeler 流程配置可视化 7大服务与核心表 23张表概览 7大核心服务(重要) 加依赖内部 ...
OUYA游戏开发快速入门教程
OUYA游戏开发快速入门教程试读地址:http://pan.baidu.com/s/1o63a3W2 本教程是国内唯一OUYA游戏开发教程.本教程基于Unity全面讲解OUYA游戏开发方式.内容包 ...
sklearn快速入门教程：（二）线性回归
文章目录一.从本文起学会快速阅读和学习二.线性回归的原理回顾及官方文档三.官方文档的分析四.举一反三五.小结一.从本文起学会快速阅读和学习本来是想把关于快速阅读的说明写在前一节,但最后还 ...
sklearn快速入门教程：（一）准备工作
sklearn快速入门教程 – 准备工作 1. 前言 sklearn全称 scikit-learn,它是一个集成了目前市面上最常用的机器学习模型的库,使用起来非常轻松简单,因此获得了广泛的应用. 从官 ...
python notebook软件_Jupyter notebook快速入门教程(推荐)
本文主要介绍了Jupyter notebook快速入门教程,分享给大家,具体如下: 本篇将给大家介绍一款超级好用的工具:Jupyter notebook. 为什么要介绍这款工具呢? 如果你想使用Pyt ...
webpack快速入门教程
webpack快速入门教程 1.webpack 介绍什么是webpackhttps://www.webpackjs.com/ Webpack是一个模块打包器(bundler) 在Webpack看来, ...

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

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

后端

前端

效果图

Flowable 快速入门教程：前端展示流程图相关推荐

最新文章

热门文章