將甘特圖導出為PDF或PNG格式教程

dhtmlxGantt是用於跨瀏覽器和跨平台應用程序的功能齊全的Gantt圖表。可滿足項目管理應用程序的所有需求，是最完善的甘特圖圖表庫。它允許你創建動態甘特圖，並以一個方便的圖形化方式可視化項目進度。有了dhtmlxGantt，你可以顯示活動之間的依賴關系，顯示具有完成百分比陰影的當前任務狀態以及組織活動到樹結構。

dhtmlxGantt提供了一種在線導出服務，可讓您將甘特圖導出為PDF或 PNG格式。

該服務是免費的，但是根據GPL許可，輸出的PDF / PNG文件將包含圖書館的水印。如果您購買了許可證，則在有效的支持期內（商業和企業許可證為12個月），導出結果將不加水印。

使用出口服務

有幾種可用的導出服務。您可以將它們安裝在計算機上，然后將甘特圖導出為本地PDF或PNG。

請注意，Gantt軟件包中未包含導出服務，請閱讀相應的文章以了解使用它們的條款。

請求大小限制

有一個通用的API端點https://export.dhtmlx.com/gantt，可用於所有導出方法（exportToPDF，exportToPNG，exportToMSProject等）。請求的最大大小為10 MB。

還有一個單獨的API端點https://export.dhtmlx.com/gantt/project，專門用於MSProject導出/導入服務 （僅exportToMSProject / importFromMSProject）。最大請求大小：40 MB。

導出為PDF

要將甘特圖導出為PDF文檔，請執行以下步驟：

1.在頁面上包含“ http://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">

2.調用exportToPDF方法以導出甘特圖：

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

導出到PNG

要將甘特圖導出為PNG圖像，請執行以下步驟：

 

1.在頁面上包含“ http://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">

2.調用exportToPNG方法以導出甘特圖：

 

 

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

導出方法的參數

 

的exportToPDF和exportToPNG方法采取作為一個參數與多個屬性（所有屬性是可選的）相同的對象：

名稱 （字符串）輸出文件的名稱
皮膚 （字符串）輸出甘特圖的外觀
地區 （string）設置將在輸出甘特圖中使用的語言
開始 （字符串）設置將在輸出甘特圖中顯示的數據范圍的開始日期。日期格式由date_format配置定義
結束 （字符串）設置將在輸出甘特圖中顯示的數據范圍的結束日期。日期格式由date_format配置定義
數據 （對象）設置一個自定義數據源，該數據源將在輸出甘特圖中顯示
標頭 （字符串）指定將添加到輸出PDF圖像的標題。注意，您可以在此處使用任何HTML
頁腳 （字符串）指定將添加到輸出PDF圖像的頁腳。注意，您可以在此處使用任何HTML
服務器 （字符串）設置請求的API端點。可以與導出服務的本地安裝一起使用。默認值為https://export.dhtmlx.com/gantt
raw （boolean）定義將使用所有自定義元素按原樣導出所有甘特標記。默認為false。

使用可選屬性調用導出方法
gantt.exportToPDF({
    name:"mygantt.pdf",
    header:"<h1>My company</h1>",
    footer:"<h4>Bottom line</h4>",
    locale:"en",
    start:"01-04-2013",
    end:"11-04-2013",
    skin:'terrace',
    data:{ },
    server:"https://myapp.com/myexport/gantt",
    raw:true
});
 
gantt.exportToPNG({
    name:"mygantt.png",
    header:"<h1>My company</h1>",
    footer:"<h4>Bottom line</h4>",
    locale:"en",
    start:"01-04-2013",
    end:"11-04-2013",
    skin:'terrace',
    data:{ },
    server:"https://myapp.com/myexport/gantt",
    raw:true
});

輸出文件名

 

要為輸出文件設置自定義名稱，請在exportToPDF / exportToPNG方法的參數中使用name屬性：

gantt.exportToPDF({
    name:"my_beautiful_gantt.pdf"
});

輸出文件的語言

 

默認情況下，甘特圖將以與頁面上顯示的語言相同的語言導出。

要為輸出文件設置自定義語言，請使用exportToPDF / exportToPNG方法的參數中的locale屬性：

gantt.exportToPDF({
    name:"mygantt.pdf",
    locale:"de" 
});

導出數據

 

若要設置應在輸出PDF或PNG文件中顯示的任務，請使用以下方法之一：

1. 指定輸出數據的日期范圍。
2. 指定用於輸出的自定義數據源。

指定輸出任務的日期范圍

 

要設置將在輸出文檔中顯示的任務范圍，請使用exportToPDF / exportToPNG方法的參數中的start，end屬性：

gantt.exportToPDF({
    name:"mygantt.pdf",
    start:"01-04-2013",
    end:"11-04-2013"
});

注意，日期格式由date_format配置定義。

 

設置要導出的自定義數據源

要使用自定義數據集導出甘特圖（即不使用初始甘特圖中顯示的數據），請在exportToPDF / exportToPNG方法的參數中使用data屬性 ：

gantt.exportToPDF({
    data:{
        data:[
            {id:1, text:"Project #1", start_date:"01-04-2013", duration:18},
            {id:2, text:"Task #1", start_date:"02-04-2013",duration:8, parent:1},
            {id:3, text:"Task #2", start_date:"11-04-2013",duration:8, parent:1}
        ],
        links:[
            {id:1, source:1, target:2, type:"1"},
            {id:2, source:2, target:3, type:"0"},
            {id:3, source:3, target:4, type:"0"},
            {id:4, source:2, target:5, type:"2"}
        ]
    }
});

請注意，您不能指定某些URL作為data參數的值，而只能指定一個data對象。

 

輸出甘特圖的外觀

默認情況下，甘特圖將以與頁面上顯示的外觀相同的外觀導出。

要為輸出的PNG或PDF文件設置不同的外觀，請使用exportToPDF / exportToPNG方法的參數中的外觀屬性：

gantt.exportToPDF({
    name:"mygantt.pdf",
    skin:"material" 
});

輸出文件的頁眉/頁腳

 

要將頁眉/頁腳添加到輸出的PNG或PDF文件中，請使用exportToPDF / exportToPNG方法的參數中的頁眉/頁腳屬性：

注意，在指定參數時可以使用任何HTML。指定圖像時，請記住，需要將全局路徑設置為“ src”屬性的值

gantt.exportToPDF({
    name:"mygantt.pdf",
    header:"<h1>My company</h1>",
    footer:"<h4>Bottom line</h4>"
});

輸出文件的自定義樣式

 

要為甘特圖應用自定義樣式，請為樣式表提供自定義CSS類：
通過鏈接：

gantt.exportToPDF({
    name:"calendar.pdf",
    header:'<link rel="stylesheet" href="http://mysite.com/custom.css">' 
});

或通過'style'標簽：

gantt.exportToPDF({
    name:"calendar.pdf",
    header:'<style>... custom css classes here ...</style>' 
});

注意，上述解決方案適用於全局HTTP參考。如果在Intranet /本地環境中指定了CSS類，則可以嵌入所有樣式，如下所示：

gantt.exportToPDF({
    header:"<style>.tier1{background: red; color:white;}</style>"
});

導出自定義標記和樣式

 

默認情況下，將根據指定的配置和加載的數據導出甘特圖，而不會導出自定義元素和某些模板。要使用所有自定義元素按原樣導出整個甘特圖標記，可以在exportToPDF / exportToPNG方法的參數中設置raw：true屬性。

gantt.exportToPDF({
    raw:true
});

請注意，自定義元素將需要提供自定義樣式才能正確顯示。

 

請注意，使用此模式會增加API請求的大小。大型圖表可能會超出在線導出10MB的限制，並且可能不會以這種方式導出。在這種情況下，您需要在本地安裝導出服務並增加請求大小。

關產品推薦：

VARCHART XGantt：支持ActiveX、.Net等平台的C#甘特圖控件

AnyGantt：構建復雜且內容豐富的甘特圖的理想工具

jQuery Gantt Package：基於HTML5 / jQuery的跨平台jQuery Gantt包

phGantt Time Package：對任務和時間的分配管理的甘特圖

APS幫助提升企業生產效率，真正實現生產計划可視化呈現與控制,快速有效響應不同場景的生產計划，提高准時交貨能力，提高產能和資源利用率

想要購買dhtmlxGantt正版授權，或了解慧都APS系統請點擊【咨詢在線客服】