导出为 PDF 和 PNG

dhtmlxGantt 提供了一个在线导出服务，允许您将甘特图保存为 PDF 或 PNG 文件。

您也可以在本地计算机上搭建多种导出服务，实现本地导出甘特图为 PDF 或 PNG。 请注意，导出服务并未随 Gantt 包一同提供——请查阅 相关文档 了解各服务的使用条款。

时间限制

如果导出过程超过 20 秒，将会被终止，并显示如下错误：

Error: Timeout trigger 20 seconds

当多位用户同时导出甘特图时，处理时间可能会变长，但每个用户的请求时间是单独计算的。

请求大小限制

通用 API 端点 https://export.dhtmlx.com/gantt 处理所有导出方法（exportToPDF、exportToPNG、exportToMSProject 等）。该端点的最大请求大小为 10 MB。

还有一个专用 API 端点 https://export.dhtmlx.com/gantt/project，用于 MSProject 和 Primavera P6 的导出/导入服务（仅限 exportToMSProject / importFromMSProject / exportToPrimaveraP6 / importFromPrimaveraP6）。该端点支持最大 40 MB 的请求。

查看更多关于 PDF 导出模块的使用详情。

要将甘特图导出为 PDF，请按照以下步骤操作：

• 使用 plugins 方法启用 export_api 插件：

gantt.plugins({
    export_api: true
});

<script src="codebase/dhtmlxgantt.js"></script>
<script src="https://export.dhtmlx.com/gantt/api.js"></script>

• 然后调用 exportToPDF 方法导出图表：

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

Related sample:  Export data from Gantt

要将甘特图导出为 PNG 图片，请按照以下步骤操作：

• 使用 plugins 方法启用 export_api 插件：

gantt.plugins({
    export_api: true
});

<script src="codebase/dhtmlxgantt.js"></script>
<script src="https://export.dhtmlx.com/gantt/api.js"></script>

• 然后调用 exportToPNG 方法导出图表：

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

Related sample:  Export data from Gantt

exportToPDF 和 exportToPNG 方法接受包含多种可选属性的对象作为参数：

调用导出方法并包含可选属性的示例

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,
    callback: function(res){
        alert(res.url);
    }
});
 
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,
    callback: function(res){
        alert(res.url);
    }
});

如需自定义导出文件的名称，请在 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"});

设置自定义导出数据源

如果希望导出甘特图时使用与当前显示不同的数据集，可在 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"}
        ]
    }
});

默认情况下，导出的甘特图与页面显示的皮肤一致。

如需在导出的 PNG 或 PDF 文件中应用不同皮肤，请在 exportToPDF/exportToPNG 方法参数中设置 skin 属性：

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

查看所有可用甘特皮肤列表。

您可以通过在 exportToPDF/exportToPNG 方法的参数中使用 header 和 footer 属性，为导出的 PNG 或 PDF 文件添加页眉或页脚：

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

要自定义导出 Gantt 图表的样式，您可以通过两种方式提供带有 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 引用。如果您的 CSS 文件托管在内网或本地，可以直接嵌入样式，如下所示：

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

为导出功能收集所有样式

有时样式分布在多个文件中且无法公开访问，这使得逐个包含变得不便。您可以收集页面上使用的所有样式，并将其包含在导出的 header 中。

所有样式都可通过 document.styleSheets 对象获取。如果样式来自同一域，您可以收集其 CSS 规则并插入到 header。示例：

const styles = []
for (el in document.styleSheets) {
    try {
        const rules = (document.styleSheets[el]).cssRules;
        for (rule in rules) {
            styles.push(rules[rule].cssText)
        }
    }
    catch (e) { }
}
 
gantt.exportToPDF({
    raw: true,
    header: "<style>" + styles.join(" ") + "</style>"
});

Related sample:   Export Gantt with custom icons to PDF

Related sample:   Export Gantt with resource load diagram to PDF with no need to specify styles

默认情况下，Gantt 图表根据提供的配置和已加载的数据进行导出，但 自定义元素 以及某些模板不会被包含。

要完整导出当前 Gantt 标记（包括所有自定义元素），请在 exportToPDF/exportToPNG 方法的参数中设置 raw:true 属性。

gantt.exportToPDF({
    raw:true
});

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

此外，使用此模式会增加 API 请求的大小。大型图表可能会超过在线导出服务的 10MB 限制而导致导出失败。在这种情况下，您需要在本地安装 导出服务 并相应调整请求大小。
请参考 系统要求 以设置本地导出服务。

将 Gantt 图表导出为 PNG 或 PDF 时，请注意由于安全原因，导出 HTML 元素存在一定限制。

某些 HTML 元素如 <canvas>、<svg>、<script> 以及 src 属性中带有 Base64 数据的图片会被限制。但仍有安全方式可导出 SVG 和 Base64 格式的图片：

• 使用 <img> 元素，并将 src 属性指向 SVG 图片的 URL（适用于 PNG 和 JPG 导出，但不支持 Base64），例如：

<img src=https://www.svgrepo.com/download/530597/hat.svg>

• 使用 CSS 样式如 background 或 background-image，其 url 值可指向图片 URL 或 Base64 数据（适用于 PNG、JPG 和 SVG 导出）：

.red {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJTUUH1ggDCwMADQ4NnwAAAFVJREFUGJWNkMEJADEIBEcbSDkXUnfSgnBVeZ8LSAjiwjyEQXSFEIcHGP9oAi+H0Bymgx9MhxbFdZE2a0s9kTZdw01ZhhYkABSwgmf1Z6r1SNyfFf4BZ+ZUExcNUQUAAAAASUVORK5CYII=") 100%/contain no-repeat;
    display: inline-block;
    width: 32px;
    height: 32px;
}

Related sample:  Exporting safe and insecure HTML elements to PDF

如果您有导出模块并需要导出在线导出服务器不支持的 HTML 元素，可以联系技术支持获取指导，以修改您的模块解除这些限制。但请注意，这可能会使您的服务器暴露于 XSS 漏洞风险。