午夜导航,二区不卡,欧美激情国产

国产精品青草久-国产精品情侣愉拍-国产精品区网红主-国产精品区一区二-国产精品热久久-国产精品热热热-国产精品人aⅴ-国产精品人成在线-国产精品人妻人伦-国产精品人人

dhtmlxGantt使用教程：如何將甘特圖導(dǎo)出為PDF或PNG格式

翻譯|使用教程|編輯：楊鵬連|2020-11-23 10:44:43.950|閱讀 973 次

概述：dhtmlxGantt提供了一種在線導(dǎo)出服務(wù)，可讓您將甘特圖導(dǎo)出為PDF或 PNG格式。

相關(guān)鏈接：

dhtmlxGantt是用于跨瀏覽器和跨平臺應(yīng)用程序的功能齊全的Gantt圖表?？蓾M足項目管理應(yīng)用程序的所有需求，是最完善的甘特圖圖表庫。它允許你創(chuàng)建動態(tài)甘特圖，并以一個方便的圖形化方式可視化項目進度。有了dhtmlxGantt，你可以顯示活動之間的依賴關(guān)系，顯示具有完成百分比陰影的當前任務(wù)狀態(tài)以及組織活動到樹結(jié)構(gòu)。

點擊下載dhtmlxGantt試用版

dhtmlxGantt提供了一種在線導(dǎo)出服務(wù)，可讓您將甘特圖導(dǎo)出為PDF或 PNG格式。

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

使用出口服務(wù)

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

請注意，Gantt軟件包中未包含導(dǎo)出服務(wù)，請閱讀相應(yīng)的文章以了解使用它們的條款。

請求大小限制

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

還有一個單獨的API端點//export.dhtmlx.com/gantt/project，專門用于MSProject導(dǎo)出/導(dǎo)入服務(wù) （僅exportToMSProject / importFromMSProject）。最大請求大?。?0 MB。

導(dǎo)出為PDF

要將甘特圖導(dǎo)出為PDF文檔，請執(zhí)行以下步驟：

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

2.調(diào)用exportToPDF方法以導(dǎo)出甘特圖：

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

導(dǎo)出到PNG

要將甘特圖導(dǎo)出為PNG圖像，請執(zhí)行以下步驟：

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

2.調(diào)用exportToPNG方法以導(dǎo)出甘特圖：

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

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

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

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

使用可選屬性調(diào)用導(dǎo)出方法
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:"http://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:"http://myapp.com/myexport/gantt",
    raw:true
});

輸出文件名

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

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

輸出文件的語言

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

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

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

導(dǎo)出數(shù)據(jù)

若要設(shè)置應(yīng)在輸出PDF或PNG文件中顯示的任務(wù)，請使用以下方法之一：

指定輸出數(shù)據(jù)的日期范圍。
指定用于輸出的自定義數(shù)據(jù)源。

指定輸出任務(wù)的日期范圍

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

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

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

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

要使用自定義數(shù)據(jù)集導(dǎo)出甘特圖（即不使用初始甘特圖中顯示的數(shù)據(jù)），請在exportToPDF / exportToPNG方法的參數(shù)中使用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參數(shù)的值，而只能指定一個data對象。

輸出甘特圖的外觀

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

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

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

輸出文件的頁眉/頁腳

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

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

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

輸出文件的自定義樣式

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

gantt.exportToPDF({
    name:"calendar.pdf",
    header:'<link rel="stylesheet"  
});

或通過'style'標簽：

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

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

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

導(dǎo)出自定義標記和樣式

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