将甘特图导出为 PDF 文件
export | object | 可选,包含导出设置(详见下文) |
gantt.exportToPDF();
//或者
gantt.exportToPDF({
name: "mygantt.pdf"
});
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);
}
});
此方法属于 export 扩展,因此请确保激活了 export_api 插件。更多信息请参见 导出为 PDF 和 PNG 文章。
对于 8.0 之前的 Gantt 版本,您需要在页面中引入 https://export.dhtmlx.com/gantt/api.js 来启用在线导出服务,例如:
<script src="codebase/dhtmlxgantt.js"></script>
<script src="https://export.dhtmlx.com/gantt/api.js"></script>
exportToPDF 方法接受一个对象参数,包含多种可选属性:
name | (string) 导出 PDF 的文件名 |
skin | ('terrace', 'skyblue', 'meadow', 'broadway') 应用于导出甘特图的主题 |
locale | (string) 设置导出甘特图中使用的语言 |
start | (string) 定义导出图表中显示数据范围的起始日期。日期格式遵循 date_format 的设置 |
end | (string) 定义导出图表中显示数据范围的结束日期。日期格式遵循 date_format 的设置 |
data | (object) 允许指定导出图表的自定义数据源 |
header | (string) 作为导出 PDF 页眉的 HTML 内容 |
footer | (string) 作为导出 PDF 页脚的 HTML 内容 |
server | (string) 处理导出请求的 API 端点 URL。可用于本地导出服务。默认值为 https://export.dhtmlx.com/gantt |
raw | (boolean) 如果为 true,则精确导出甘特图的 markup,包括自定义元素。默认为 false。更多详情 |
callback | (function) 接收包含下载生成 PDF 文件 URL 的 JSON 对象的回调函数 |
additional_settings | (object) 额外设置,可包含:
|
导出服务有时间限制。
如果导出时间超过 20 秒,导出过程将被取消,并显示以下错误:
Error: Timeout trigger 20 seconds
如果多个用户同时导出甘特图,可能导致过程比平时更长。但每个用户的导出时间是单独计算的。
对于大型图表导出,建议使用独立导出模块。该模块随 Commercial、Enterprise 或 Ultimate 许可证免费提供,也可单独购买,详见 这里。
请注意,导出模块无法:
这些需要自定义解决方案。以下提供一些示例。
若要将多页导出合并为单个文件,可使用在线导出服务(受时间限制约束)或无时间限制的独立导出模块。 只需在 additional_settings 中设置 merge_pages 选项:
gantt.exportToPDF({
additional_settings: {
merge_pages: true, format: "A4"
}
});
在线导出服务适合较小甘特图。对于大型图表,数据可能分批导出。此时,您可以进行多次手动导出或使用独立导出模块,它能处理所有数据并生成包含所有页面的单一文件。
请注意,多页导出比单页导出耗时更长。为加快速度,可调整缩放级别至周、月或年,减少甘特图宽度和导出时间。
详情请见相关文章。
由于甘特图通常宽度超过标准页面尺寸,导出时每次只捕获最左侧部分。 要导出全部数据,需要多次导出,每次将图表向左移动。
要在导出文件中移动甘特图,可通过 header 参数为 #gantt_here 添加如下样式规则:
const width = 1000;
const height = 1000;
const total_width = gantt.$task_bg.scrollWidth + gantt.$grid.scrollWidth;
for (let i = 0; i < total_width; i += width) {
gantt.exportToPDF({
header:`<style>#gantt_here{left:-${i}px;position: absolute;}</style>`,
//raw: true,
additional_settings:{
width: width,
height: height,
}
});
}
如果导出为特定格式如 'A3',请注意文件格式单位为毫米,而 HTML 尺寸为像素。 您需要将毫米转换为像素作为偏移值:
const widthMM = 297;
const width = widthMM / (25.4 inch / 96 PDF PPI);
注意: 如果多页导出只生成一个 PDF 文件,可能是浏览器阻止了弹窗,因为多次导出会同时打开多个弹窗。
请启用弹窗后重试导出。
要在导出文件的每一页显示 timeline 和 grid 的表头,请在 additional_settings 中启用 fixed_headers 选项。 此功能仅在启用 merge_pages 时有效:
gantt.exportToPDF({
additional_settings: {
merge_pages: true, fixed_headers: true, format: "A4"
}
});
Related sample: 资源面板视图多页导出,每页带表头示例
若不使用配置,例如导出多个文件后手动合并,可使用以下 CSS:
.grid_cell .gantt_grid_scale,
.timeline_cell .gantt_task_scale {
position: fixed;
top:0;
z-index:99999;
}