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="http://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:"http://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甘特圖。