exportToPDF

将甘特图导出为 PDF 文件

void exportToPDF( [object export] );
exportobject可选,包含导出设置(详见下文)

Example

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

Details

此方法属于 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 方法接受一个对象参数,包含多种可选属性:

时间限制

导出服务有时间限制。

如果导出时间超过 20 秒,导出过程将被取消,并显示以下错误:

Error: Timeout trigger 20 seconds

如果多个用户同时导出甘特图,可能导致过程比平时更长。但每个用户的导出时间是单独计算的。

对于大型图表导出,建议使用独立导出模块。该模块随 CommercialEnterpriseUltimate 许可证免费提供,也可单独购买,详见 这里

多页导出

请注意,导出模块无法:

  • 控制分页位置,任务可能被拆分到不同页面
  • 在每页显示刻度而不重叠任务
  • 在每页显示页眉和页脚而不重叠任务行

这些需要自定义解决方案。以下提供一些示例。

自动导出多页到单个文件

若要将多页导出合并为单个文件,可使用在线导出服务(受时间限制约束)或无时间限制的独立导出模块。 只需在 additional_settings 中设置 merge_pages 选项:

gantt.exportToPDF({
    additional_settings: {
        merge_pages: true,         format: "A4"
    }
});

在线导出服务适合较小甘特图。对于大型图表,数据可能分批导出。此时,您可以进行多次手动导出或使用独立导出模块,它能处理所有数据并生成包含所有页面的单一文件。

Related sample:  多页导出到单个文件示例

请注意,多页导出比单页导出耗时更长。为加快速度,可调整缩放级别至周、月或年,减少甘特图宽度和导出时间。

详情请见相关文章

手动多次导出

由于甘特图通常宽度超过标准页面尺寸,导出时每次只捕获最左侧部分。 要导出全部数据,需要多次导出,每次将图表向左移动。

要在导出文件中移动甘特图,可通过 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,
    }
  });
}

Related sample:  指定大小导出示例

如果导出为特定格式如 'A3',请注意文件格式单位为毫米,而 HTML 尺寸为像素。 您需要将毫米转换为像素作为偏移值:

const widthMM = 297;
const width = widthMM / (25.4 inch / 96 PDF PPI);

Related sample:  指定格式导出示例


注意: 如果多页导出只生成一个 PDF 文件,可能是浏览器阻止了弹窗,因为多次导出会同时打开多个弹窗。 请启用弹窗后重试导出。

blocked_popup

在每页显示 timeline 和 grid 表头

要在导出文件的每一页显示 timeline 和 grid 的表头,请在 additional_settings 中启用 fixed_headers 选项。 此功能仅在启用 merge_pages 时有效:

gantt.exportToPDF({
    additional_settings: {
        merge_pages: true,          fixed_headers: true,          format: "A4"
    }
});

Related sample:  多页导出,每页带表头示例

Related sample:  资源面板视图多页导出,每页带表头示例

若不使用配置,例如导出多个文件后手动合并,可使用以下 CSS:

.grid_cell .gantt_grid_scale,
.timeline_cell .gantt_task_scale {
  position: fixed;
  top:0;
  z-index:99999;
}
See also
Back to top