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

效果图