Gantt图表DhtmlxGantt使用教程：导出到 Excel

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

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

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

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

导出到 Excel

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

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

  <script src="codebase/dhtmlxgantt.js"></script><script src="https://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 端点。可与导出服务的本地安装一起使用。默认值为https://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:"https://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甘特图。

标签：

来源：慧都