将甘特图导出为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文件中显示的任务,请使用以下方法之一:
- 指定输出数据的日期范围。
- 指定用于输出的自定义数据源。
指定输出任务的日期范围
要设置将在输出文档中显示的任务范围,请使用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系统请点击【咨询在线客服】