项目管理工具dhtmlxGantt甘特图入门教程（十三）：导出PDF和PNG格式

秒速五厘米 2023-09-24 20:13 55阅读 0赞

这篇文章给大家讲解[dhtmlxGantt][]如何导出PDF和PNG格式。

[dhtmlxGantt][dhtmlxGantt 1]是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表，可满足应用程序的所有需求，是完善的甘特图图表库

**[DhtmlxGantt正版试用下载（qun 764148812）![icon-default.png?t=N176][icon-default.png_t_N176]https://www.evget.com/product/4213/download][dhtmlxGantt 1]**

1、导出为PDF和PNG

要将甘特图导出为PDF文档，请执行以下步骤：

*  在页面中包含“https://export.dhtmlx.com/gantt/api.js”文件以启用在线导出服务：

>     <script src="codebase/dhtmlxgantt.js"></script>
>     <script src="https://export.dhtmlx.com/gantt/api.js"></script>  
>     <link rel="stylesheet" href="codebase/dhtmlxgantt.css" type="text/css">

*  调用exportToPDF方法导出甘特图：

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

2、导出为 PNG

要将甘特图导出为PNG图像，请执行以下步骤：

*  在页面中包含“https://export.dhtmlx.com/gantt/api.js”文件以启用在线导出服务：

*  调用exportToPNG方法导出甘特图：

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

3、输出文件的名称

要为输出文件设置自定义名称，请使用exportToPDF/exportToPNG方法的参数中的name属性：

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

4、输出文件的语言

默认情况下，甘特图将以页面上显示的相同语言导出。

要为输出文件设置自定义语言，请使用exportToPDF/exportToPNG方法的参数中的locale属性：

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

5、要导出的数据

要设置应在输出PDF或PNG文件中显示的任务，请使用以下方法之一：

**指定输出任务的日期范围**

要设置将在输出文档中显示的任务范围，请使用exportToPDF/exportToPNG方法的参数中的start、end属性：

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

设置要导出的自定义数据源

要使用自定义数据集（即不使用初始甘特图中显示的数据）导出甘特图，请使用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"}
>             ]
>         }
>     });

6、输出甘特图的皮肤

默认情况下，甘特图将使用与页面上显示的相同的皮肤导出。

要为输出PNG或PDF文件设置不同的外观，请使用exportToPDF/exportToPNG方法的参数中的外观属性：

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

7、输出文件的页眉/页脚

要向输出 PNG 或 PDF 文件添加页眉/页脚，请使用exportToPDF/exportToPNG方法的参数中的页眉/页脚属性：

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

8、输出文件的自定义样式

要为甘特图应用自定义样式，请为样式表提供自定义 CSS 类：

*  通过链接：

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

*  通过“样式”标签：

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

9、导出自定义标记和样式

默认情况下，甘特图是根据指定的配置和加载的数据导出的，而不导出自定义元素和一些模板。要使用所有自定义元素按原样导出整个甘特图标记，您可以在exportToPDF/exportToPNG方法的参数中设置raw:true属性。

>     gantt.exportToPDF({
>         raw:true
>     });

请注意，自定义元素需要提供自定义样式才能正确显示。

[dhtmlxGantt]: https://www.evget.com/product/4213/license
[dhtmlxGantt 1]: https://www.evget.com/product/4213/download
[icon-default.png_t_N176]: https://csdnimg.cn/release/blog_editor_html/release2.2.3/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=N176