Question

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

Answer 1

您可以将DHX Gantt模板用于网格列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设置行高 gantt.config.row_height = 40;

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

祝你好运！

Dhtmlx甘特图：导出到.pdf

1 个答案: