项目管理工具dhtmlxGantt甘特图入门教程（十四）：导出/导入 Excel到 iCal

迷南。 2023-09-24 20:43 27阅读 0赞

这篇文章给大家讲解利用dhtmlxgantt导入/导出Excel到iCal的操作方法。

[dhtmlxGantt][]是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表，可满足应用程序的所有需求，是完善的甘特图图表库

**[DhtmlxGantt正版试用下载（qun；765665608）![icon-default.png?t=N176][icon-default.png_t_N176]https://www.evget.com/product/4213/download][dhtmlxGantt]**

[dhtmlxGantt][]库可以让您以Excel和iCal格式从甘特图中导出数据。您还可以将数据从 Excel文件导入甘特图。

1、导出到 Excel

要将甘特图中的数据导出到Excel文档，请执行以下操作：

*  在页面中包含“https://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" οnclick='gantt.exportToExcel()'>
>      
>     <script>
>         gantt.init("gantt_here");
>         gantt.parse(demo_tasks);
>     </script>

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

>     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}
>         ]      
>     });

**添加要导出的任务颜色**

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

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

2、从Excel导入

由于无法自动将Excel文档的任意列映射到甘特数据模型，因此导出服务将文档转换为以JSON形式返回的行数组。将生成的文档转换为甘特图数据是最终开发人员的责任。

为了转换Excel文件，您需要向导出服务发送以下请求：

*  请求网址 - https://export.dhtmlx.com/gantt
 *  请求方法 - POST
 *  内容类型 -多部分/表单数据

请求参数为：

*  文件-Excel文件
 *  类型-“excel解析”
 *  数据-（可选）带有设置的JSON字符串

例如：

>     <form action="https://export.dhtmlx.com/gantt" method="POST" 
>         enctype="multipart/form-data">
>         <input type="file" name="file" />
>         <input type="hidden" name="type" value="excel-parse">
>         <button type="submit">Get</button>
>     </form>

或者，您可以使用客户端 API：

>     gantt.importFromExcel({
>         server:"https://export.dhtmlx.com/gantt",
>         data: file,
>         callback: function(project){
>             console.log(project)
>         }
>     });

其中file是File的一个实例，它应该包含一个 Excel (xlsx) 文件。

响应：将包含一个带有对象数组的JSON：

>     [
>        { "Name": "Task Name", "Start": "2018-08-11 10:00", "Duration": 8 },
>        ...
>     ]

位置：

*  第一行的值用作导入对象的属性名称。
 *  每行都被序列化为一个单独的对象。
 *  日期值以“%Y-%m-%d %H:%i”格式序列化。

导入设置

导入服务期望导入工作表的第一行是包含列名的标题行。

默认情况下，该服务返回文档的第一页。要返回不同的工作表，请使用工作表参数（从零开始）

>     gantt.importFromExcel({
>         server:"https://export.dhtmlx.com/gantt",
>         data: file,
>         sheet:2, // print third sheet
>         callback: function (rows) {}
>     });

3、导出到iCal

要将数据从甘特图导出到iCal字符串，请执行以下操作：

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

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

>     <input value="Export to iCal" type="button" οnclick='gantt.exportToICal()'>
>      
>     <script>
>         gantt.init("gantt_here");
>         gantt.parse(demo_tasks);
>     </script>

导出方法的参数

exportToICal ()方法将具有以下属性的对象作为参数（可选）：

*  server - ( string ) 设置请求的 API 端点。可与导出服务的本地安装一起使用。默认值为https://export.dhtmlx.com/gantt；
 *  name - ( string ) 允许为文件指定自定义名称和扩展名，但文件仍将以 iCal 格式导出。

>     gantt.exportToICal({
>         server:"https://myapp.com/myexport/gantt"
>     });

[dhtmlxGantt]: https://www.evget.com/product/4213/download
[icon-default.png_t_N176]: https://csdnimg.cn/release/blog_editor_html/release2.2.3/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=N176