Dhtmlx 甘特图:导出到.pdf

Question

我的任务描述很长，当我导出到.pdf时，文本是隐藏的（我不能使任务列太宽）：如何将文本分成网格内的 2 或 3 行？是否可以将文本强制到新行？

Answer 1

您可以使用 DHX 甘特图模板进行网格列 https://docs.dhtmlx.com/gantt/desktop__specifying_columns.html#settingthetemplateofdatapresentation

然后为任务文本元素设置并定义一个新类。像这样的东西

gantt.config.columns = [
    {name:"wbs", label:"WBS", width:40, template:gantt.getWBSCode },
    {name:"text", label:"Task name", tree:true, width:170, template: function(task) {return "<div class='gantt_multiline'>" + task.text + "</div>"} },
    {name:"start_date", align: "center", width: 90},
    {name:"duration", align: "center" , width: 60},
    {name:"add", width:40}
];

然后为这个类定义 CSS

<style type="text/css">
.gantt_multiline {
    white-space: normal;
    background-color: #FFE0F9;
    line-height: 110% !important;
    font-size:8pt !important;
}

我放置BG颜色只是为了指示我们正在处理的区域。然后。导出为 PDF 时，您只需将此 CSS 定义发送到页眉中https://docs.dhtmlx.com/gantt/desktop__export.html#customstylefortheoutputfile

gantt.exportToPDF({
        name: "My Page.pdf",
        header: "<div><style type='text/css'>.gantt_multiline{white-space:normal;background-color:#FFF0F9;line-height:110% !important;font-size:8pt !important;}</style></div>"
    });

例如，还可以在 DHX 甘特图处设置行高gantt.config.row_height = 40;

在这里，我在任务的栏上找到了多行的实时示例 https://docs.dhtmlx.com/gantt/snippet/213a0e27请注意，在此示例中，该类仅应用于大型任务名称

此致敬意！