半岛权威十大直营(官方)网站

DhtmlxGantt 库允许以 Excel 和 iCal 格式从甘特图中导出数据，还可以将数据从 Excel 文件导入甘特图。本文将介绍如何导出到 Excel。

有一个通用 API 端点//export.dhtmlx.com/gantt用于所有导出方法（exportToPDF、exportToPNG、exportToMSProject等）和importFromExcel 方法。最大请求大小为 10 MB。

还有一个单独的 API 端点//export.dhtmlx.com/gantt/project专用于MSProject 导出/导入服务 （仅限 exportToMSProject / importFromMSProject）。最大请求大小：40 MB。

导出到 Excel

htmlxGantt最新版本 v7.1 开始，要将甘特图中的数据导出到 Excel 文档，请执行以下操作：

• 在页面中包含“//export.dhtmlx.com/gantt/api.js”文件以启用在线导出服务：

  <script src="codebase/dhtmlxgantt.js"></script>
  <script src="//export.dhtmlx.com/gantt/api.js"></script>  
  <link rel="stylesheet" href="codebase/dhtmlxgantt.css" type="text/css">

• 调用exportToExcel方法从甘特图中导出数据：

  <input value="Export to Excel" type="button" onclick='gantt.exportToExcel()'>
   
  <script>
      gantt.init("gantt_here");
      gantt.parse(demo_tasks);
  </script>

导出方法的参数

exportToExcel ()方法将具有多个属性的对象作为参数（所有属性都是可选的）：

• name - ( string ) 设置扩展名为 '.xlsx' 的输出文件的名称 。
• columns - ( array ) 允许配置输出 Excel 工作表的列。列对象的属性是：
• 'id' - ( string,number ) 将映射到列的事件属性。
• 'header' - （字符串）列标题。
• 'width' - ( number ) 以像素为单位的列宽。
• 'type' - ( string ) 列类型。
• server - ( string ) 设置请求的 API 端点。可与导出服务的本地安装一起使用。默认值为//export.dhtmlx.com/gantt。
• visual - ( boolean ) 将时间线图表添加到导出的 Excel 文档中。
• cellColors - ( boolean ) 如果设置为true，导出文档的单元格将具有由timeline_cell_class模板定义的颜色，颜色和背景颜色 属性被导出 。
• data - ( object ) 设置将在输出甘特图中显示的自定义数据源。
• date_format - ( string ) 设置日期将在导出的 Excel 文档中显示的格式。您可以在此处查看可用格式代码的完整列表。

使用可选属性调用导出方法：

gantt.exportToExcel({
    name:"document.xlsx", 
    columns:[
        { id:"text",  header:"Title", width:150 },
        { id:"start_date",  header:"Start date", width:250, type:"date" }
    ],
    server:"//myapp.com/myexport/gantt",
    visual:true,
    cellColors:true,
    data:{},
    date_format: "dddd d, mmmm yyyy"
});

默认日期参数

导出模块期望start_date和end_date列具有Date类型，而duration列具有number类型。

在应用自定义模板的情况下，要么返回预期类型的值，要么在列配置的name属性中定义不同的值。例如：

gantt.config.columns = [
    ...
    {name: "start_date", align: "center", width: 100, resize: true, 
        editor: start_dateEditor},
    {name: "end_date", align: "center", width: 100, resize: true, 
        editor: end_dateEditor},
    {name: "duration_formatted", 
        align: "center", width: 40, resize: true, 
        editor: durationEditor, 
        template: function(task){ 
            return formatter.format(task.duration_formatted); 
        }
    },
    ...
];

否则，甘特图数据将不会被导出。

设置要导出的自定义数据源

要使用自定义数据集（即不使用初始甘特图中显示的数据）导出甘特图，请使用exportToExcel方法的参数中的 data属性：

gantt.exportToExcel({   
    name:"document.xlsx", 
    data:[
        {id:1, text:"Project #1", start_date:"01-04-2020", duration:18},
        {id:2, text:"Task #1", start_date:"02-04-2020",duration:8, parent:1},
        {id:3, text:"Task #2", start_date:"11-04-2020",duration:8, parent:1}
    ]      
});

请注意，您不能将某个 URL 指定为data参数的值，而只能指定一个数据对象。

添加要导出的任务颜色

可以通过将视觉属性的值设置为"base-colors"来将任务的颜色添加到甘特图的导出 Excel 文件中：

gantt.exportToExcel({
    visual: "base-colors", 
    cellColors: true
})

以上就是导出到 Excel的相关内容，更多关于DhtmlxGantt使用教程的内容可进入官网查看。

加入官方社群，第一手掌握DhtmlxGantt 版本动态以及相关教程，还能与同行们共同交流，分享学习！

DhtmlxGantt技术交流群：764148812

DhtmlxGantt| 下载试用

DhtmlxGantt是针对您的解决方案的交互式JavaScript / HTML5甘特图。