java代码借助插件生成组织架构图并实现导出功能

先说一下需求，前几天产品提出了一个很（恶）好（心）的需求，将组织机构生成架构图并且能导出，数据如下：
下面是架构图

根据数据和架构图可以看出来，其实就是有父子关系的数据而已，因为是Java项目且使用的前端是jsp，而博主对前端又不是那么精通，平时都是粘贴复制修改而已，在已知功能中是没办法实现的。木得办法，只能看网上是否有第三方插件能实现此功能了，在找了1天后，终于还是找到了实现的方法，可以通过第三方插件实现此次需求，不过导出的图片有些模糊，网上说这是插件的问题，目前只能凑合着用，若对导出图片有非常高的清晰度的需求，请自行再想办法吧。。。

话不多说，先说一下使用的插件和下载地址，然后下面会说一下本次需求的实现方法和部分代码：

orgChart：基于ES6的组织结构图插件。
下载地址：orgChart下载；可能看其他的博主是gitHub的下载地址，但gitHub上没有示例，这里下载的压缩包里是有案例的，但还是缺少一些js和css，下面会说明缺少的js和css的下载地址。
下载后可直接看demo文件夹下的示例

jquery.min.js：下载地址不再多说
jquery.orgchart.js：下载的zip中src下已经有了
html2canvas.min.js：生成图片必不可少的js，点击下载
jquery.mockjax.min.js：这个忘记作用了，不过记得报过404错误，所以还是下载下来吧。下载地址
jspdf.min.js：导出图片不可少；查看版本地址；官网下载地址，会让填写一些信息，随便填就行； gitHub下载地址后面的v1.5.2可以参考版本地址自己修改

整理过的文件案例下载地址

准备工作做完了，下面就可以根据下载的案例去实现自己的功能了

1. jsp页面导入css样式

<link rel="stylesheet" href="css/jquery.orgchart.css">
<link rel="stylesheet" href="css/style.css">

2. 再引入js

<%--这里未引入jquery.mockjax.min.js，这个js应该是ajax加载数据时需要--%>
<div id="chart-container" style=""></div> <!--定义加载数据的div,id下面要用到-->
<script type="text/javascript" src="${ctxStaticUrl}/static/js/jquery.min.js"></script>
<script type="text/javascript" src="${ctxStaticUrl}/static/js/html2canvas.min.js"></script>
<script type="text/javascript" src="${ctxStaticUrl}/static/js/jspdf.min.js"></script>
<script type="text/javascript" src="${ctxStaticUrl}/static/js/jquery.orgchart.js"></script>

3. 加载数据，这里先将案例中的静态数据（json格式）拿过来，下面会从代码中获取并封装成这样的json数据

<script type="text/javascript">
    $(function() {
   
    var datascource = {
   
		  'name': 'Lao Lao',
		  'title': 'general manager',
		  'children': [
			{
    'name': 'Bo Miao', 'title': 'department manager' },
			{
    'name': 'Su Miao', 'title': 'department manager',
			  'children': [
				{
    'name': 'Tie Hua', 'title': 'senior engineer' },
				{
    'name': 'Hei Hei'