DHTMLX Gantt 甘特图导出全数据图-----自实现方式过程记录

针对上一篇DHTMLX Gantt甘特图导出全数据图，使用官方提供的方法虽然很方便，也免费，但每次生成图片的时候需要访问下：export.dhtmlx.com的相关授权接口，这对我们的项目如果是在内网（不能联网访问外网的情况）非常不友好，也就无法使用官方的方式了。

那么如果尽量能实现同等的效果，并且不依赖于任何外部网络资源的情况，可以实现吗？可以，就是过程有些多，有些CSS效果需要不断调试。

主要过程如下：

html部分修订：

 在原文件button区域追加一个导出按钮，用于触发测试图片导出：

<input value="导出-新测试" type="button" class="layui-btn layui-btn-green" style="margin-left: 5px;width: 4%;"
            onclick='newExport()' />

css部分修订：

 将甘特图所在的父级div以及甘特图本身的div css关于width和height修订：----【核心】

.con-3 {
  min-width: 1500px;
  min-height: 75vh;
  background-color: white;
  border-radius: 4px;
  height:auto;
}

#gantt_here{
  min-width: 99vw;
  min-height: 66vh;
  height:auto;
  width: auto;
}

javascript部分修订：

让进度条上文本显示为空格，避免会自动显示【工作描述】内容：

   gantt.templates.task_text = function (start, end, task) {
      return " ";
    };

修订左侧列宽配置，尽量保证左侧列信息全显示：

  gantt.config.columns = [
      {
        name: "text", label: "工作描述", tree: true, width:"*", resize: true,
      },

      {
        name: "progress", label: "进度", align: "center",width: 50, resize: true,
        template: obj => (Math.round(obj.progress * 100)).toString() + '%'
      },

      { name: "start_date", label: "开始日期", align: "center",width: 75,resize: true },
      {
        name: "end_date", label: "结束日期", align: "center",width: 75,resize: true,

        //20250211 针对进度条图形追加+1天显示后，任务结束日期列的值也被加1天显示的问题（应该显示数据库给的原始结束日期文本）优化修复
        template: function (task) {
          // 返回任务的原始结束日期  
          return task.original_end_date ? gantt.date.date_to_str("%Y-%m-%d")(task.original_end_date) : "";
        }
      },
      {
        name: "duration", label: "工期(天)", align: "center",width: 55,resize: true,
        template: function (task) {
          // 如果duration是null或undefined，返回0  
          return (task.duration || 0) + 1; // 在当前duration的基础上加1  
        }
      },
      {
        name: "username", label: "责任人", align: "center",width: 55, resize: true
      },
    ];

修订layout布局配置（必须给一个固定写死的width，没办法，它无法根据内容多少自定义变宽。

即时你设置width,gantt自身会设定一个较大的宽度值）：

    gantt.config.layout = {
      css: "gantt_container",
      cols: [
        {
          width:800,
          rows: [
            { view: "grid", scrollX: "gridScroll", scrollable: true, scrollY: "scrollVer" },
            { view: "scrollbar", id: "gridScroll", group: "horizontal" }
          ]
        },
        { resizer: true, width: 1 },
        {
          rows: [
            { view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
            { view: "scrollbar", id: "scrollHor", group: "horizontal" }
          ]
        },
        { view: "scrollbar", id: "scrollVer" }
      ]
    };

设置右侧时间列的最小宽度（保证时间列的列标题能完整显示，

结合实际列标题数据不断CSS调试得出宽度值）

gantt.config.min_column_width = 65;

修改初始右侧时间列区域显示的数据层级为week(为的初始效果好看些，周数据多一些能充满区域，

要是年或月的化有可能充不满右侧区域，只是为了用户体验做了调整)

 gantt.ext.zoom.setLevel("week");

 取消甘特图的xy轴的滚动条----【核心】

  gantt.config.autosize = "xy";

编写自定义的导出甘特图图片方法----【核心】 （导出全部数据图片，需要CSS设置甘特图显示区域取消滚动条，

宽高auto（上面已写），并且还需要上一步的“取消甘特图的xy轴的滚动条配置”（上面已写））

  function newExport() {
    // 前提还需要设置取消滚动条的显示
    const originalDiv = document.getElementById('gantt_here');  
    // 创建克隆元素  
    const clone = originalDiv.cloneNode(true);  
    
    // 将克隆元素的样式设置为适合导出  
    clone.style.width = "auto"; // 设置为自动宽度以显示完整内容  
    clone.style.height = "auto"; // 设置为自动高度以显示完整内容  
    clone.style.overflow = "visible"; // 确保内容不会被截断  
    clone.style.position = "absolute"; // 将元素从文档流中移除  

    // 把克隆元素添加到文档中以供导出  
    document.body.appendChild(clone);  

    // 使用 HTML2Canvas 导出克隆元素  
    html2canvas(clone).then((canvas) => {  
        const link = document.createElement('a');  
        link.href = canvas.toDataURL('image/png');  
        link.download = 'gantt_here.png';  // 图片名称  
        link.click();  

        // 导出后移除克隆元素  
        document.body.removeChild(clone);  
    });   
  }

完成以上过程即可导出完整甘特图图片。

结果图>>

导出图片前部分网页浏览效果：

点击新导出图片按钮后最终结果图：

后续根据需要，也可以研究导出excel和导出pdf的功能。