将甘特图导出为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系统请点击【咨询在线客服】