彩票走势图

dhtmlxGantt使用教程:如何将甘特图导出为PDF或PNG格式

翻译|使用教程|编辑:杨鹏连|2020-11-23 10:44:43.950|阅读 880 次

概述:dhtmlxGantt提供了一种在线导出服务,可让您将甘特图导出为PDF或 PNG格式。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求,是最完善的甘特图图表库。它允许你创建动态甘特图,并以一个方便的图形化方式可视化项目进度。有了dhtmlxGantt,你可以显示活动之间的依赖关系,显示具有完成百分比阴影的当前任务状态以及组织活动到树结构。

点击下载dhtmlxGantt试用版

dhtmlxGantt提供了一种在线导出服务,可让您将甘特图导出为PDF或 PNG格式。

该服务是免费的,但是根据GPL许可,输出的PDF / PNG文件将包含图书馆的水印。如果您购买了许可证,则在有效的支持期内(商业和企业许可证为12个月),导出结果将不加水印。

使用出口服务

有几种可用的导出服务。您可以将它们安装在计算机上,然后将甘特图导出为本地PDF或PNG。

请注意,Gantt软件包中未包含导出服务,请阅读相应的文章以了解使用它们的条款。

请求大小限制

有一个通用的API端点//export.dhtmlx.com/gantt,可用于所有导出方法(exportToPDF,exportToPNG,exportToMSProject等)。请求的最大大小为10 MB。

还有一个单独的API端点//export.dhtmlx.com/gantt/project,专门用于MSProject导出/导入服务 (仅exportToMSProject / importFromMSProject)。最大请求大小:40 MB。

导出为PDF

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

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

<script src="codebase/dhtmlxgantt.js"></script>
<script src="//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.在页面上包含“ //export.dhtmlx.com/gantt/api.js”文件以启用在线导出服务:

<script src="codebase/dhtmlxgantt.js"></script>
<script src="//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端点。可以与导出服务的本地安装一起使用。默认值为//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:"//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:"//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="//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系统请点击

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP