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

效果圖