如何在 Balkan OrgChartJS 中将 PDF 导出中的标题居中

Question

function preview() {
    /*centerElement();*/
    let fileNameWithTitle = MyTitle.replace(/\s+/g, '_');
    let PdfTitle = "<center>" + MyTitle + "</center>";
    OrgChart.pdfPrevUI.show(chart, {
        format: 'A4',
        landscape: true,
        padding: 50,
        header: PdfTitle,
        filename: fileNameWithTitle += "_OrgChart.pdf"
    });
}

上面是我在导出之前先预览pdf的代码。我尝试通过将标签硬编码到标题本身中来使元素居中，但它不起作用，因为标题实际上位于如下标签中：

<div id="boc-header" style="color: rgb(117, 117, 117); position: absolute; left: 40px; top: -15px;"><h3 style="display: flex; justify-content: center; align-item: center;">Division Organization Chart</h3></div>

以 id boc-header 为目标也不起作用，因为它仅在网站中居中，但在导出自身时（发生在巴尔干服务器），结果将始终是左侧的标题位置。

如果您想知道我如何定位 id boc-header，

<style id="myStyles">
    @import url("https://fonts.googleapis.com/css?family=Gochi+Hand");

    .node {
        font-family: Arial;
    }

    boc-header {
        color: rgb(117, 117, 117) !important;
        position: absolute !important;
        left: 50% !important;
        top: 15px !important;
        transform: translateX(-50%) !important;
    }

    .node.HR rect {
        fill: #E99113;
    }
    .node.HR line {
        stroke: #E99113;
    }
</style>

chart.on('exportstart', function (sender, args) {
    args.styles += document.getElementById('myStyles').outerHTML;
});

我不确定这是否可能。使其居中的唯一方法是操纵标题。无论我应用什么麦粒肿，它都会出现在导出的结果中。

谢谢你。

所有细节都在上面

Answer 1

这是一个代码示例： https://code.balkan.app/org-chart-js/center-header-on-pdf-export#HTML

结果如下：