DhtmlxGantt 庫(kù)允許以 Excel 和 iCal 格式從甘特圖中導(dǎo)出數(shù)據(jù)，還可以將數(shù)據(jù)從 Excel 文件導(dǎo)入甘特圖。本文將介紹如何導(dǎo)出到 Excel。

有一個(gè)通用 API 端點(diǎn)//export.dhtmlx.com/gantt用于所有導(dǎo)出方法（exportToPDF、exportToPNG、exportToMSProject等）和importFromExcel 方法。最大請(qǐng)求大小為 10 MB。

還有一個(gè)單獨(dú)的 API 端點(diǎn)//export.dhtmlx.com/gantt/project專用于MSProject 導(dǎo)出/導(dǎo)入服務(wù) （僅限 exportToMSProject / importFromMSProject）。最大請(qǐng)求大小：40 MB。

導(dǎo)出到 Excel

htmlxGantt最新版本 v7.1 開(kāi)始，要將甘特圖中的數(shù)據(jù)導(dǎo)出到 Excel 文檔，請(qǐng)執(zhí)行以下操作：

• 在頁(yè)面中包含“//export.dhtmlx.com/gantt/api.js”文件以啟用在線導(dǎo)出服務(wù)：

  <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">

• 調(diào)用exportToExcel方法從甘特圖中導(dǎo)出數(shù)據(jù)：

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

導(dǎo)出方法的參數(shù)

exportToExcel ()方法將具有多個(gè)屬性的對(duì)象作為參數(shù)（所有屬性都是可選的）：

• name - ( string ) 設(shè)置擴(kuò)展名為 '.xlsx' 的輸出文件的名稱 。
• columns - ( array ) 允許配置輸出 Excel 工作表的列。列對(duì)象的屬性是：
• 'id' - ( string,number ) 將映射到列的事件屬性。
• 'header' - （字符串）列標(biāo)題。
• 'width' - ( number ) 以像素為單位的列寬。
• 'type' - ( string ) 列類型。
• server - ( string ) 設(shè)置請(qǐng)求的 API 端點(diǎn)。可與導(dǎo)出服務(wù)的本地安裝一起使用。默認(rèn)值為//export.dhtmlx.com/gantt。
• visual - ( boolean ) 將時(shí)間線圖表添加到導(dǎo)出的 Excel 文檔中。
• cellColors - ( boolean ) 如果設(shè)置為true，導(dǎo)出文檔的單元格將具有由timeline_cell_class模板定義的顏色，顏色和背景顏色 屬性被導(dǎo)出 。
• data - ( object ) 設(shè)置將在輸出甘特圖中顯示的自定義數(shù)據(jù)源。
• date_format - ( string ) 設(shè)置日期將在導(dǎo)出的 Excel 文檔中顯示的格式。您可以在此處查看可用格式代碼的完整列表。

使用可選屬性調(diào)用導(dǎo)出方法：

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

默認(rèn)日期參數(shù)

導(dǎo)出模塊期望start_date和end_date列具有Date類型，而duration列具有number類型。

在應(yīng)用自定義模板的情況下，要么返回預(yù)期類型的值，要么在列配置的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); 
        }
    },
    ...
];

否則，甘特圖數(shù)據(jù)將不會(huì)被導(dǎo)出。

設(shè)置要導(dǎo)出的自定義數(shù)據(jù)源

要使用自定義數(shù)據(jù)集（即不使用初始甘特圖中顯示的數(shù)據(jù)）導(dǎo)出甘特圖，請(qǐng)使用exportToExcel方法的參數(shù)中的 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}
    ]      
});

請(qǐng)注意，您不能將某個(gè) URL 指定為data參數(shù)的值，而只能指定一個(gè)數(shù)據(jù)對(duì)象。

添加要導(dǎo)出的任務(wù)顏色

可以通過(guò)將視覺(jué)屬性的值設(shè)置為"base-colors"來(lái)將任務(wù)的顏色添加到甘特圖的導(dǎo)出 Excel 文件中：

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

以上就是導(dǎo)出到 Excel的相關(guān)內(nèi)容，更多關(guān)于DhtmlxGantt使用教程的內(nèi)容可進(jìn)入官網(wǎng)查看。

加入官方社群，第一手掌握DhtmlxGantt 版本動(dòng)態(tài)以及相關(guān)教程，還能與同行們共同交流，分享學(xué)習(xí)！

DhtmlxGantt技術(shù)交流群：764148812

DhtmlxGantt| 下載試用

DhtmlxGantt是針對(duì)您的解決方案的交互式JavaScript / HTML5甘特圖。