如何在Balkan OrgChartJS导出PDF时实现标题居中

问题背景 #

使用Balkan OrgChart导出PDF时，尝试通过<center>标签包裹标题、或在网页端给#boc-header设置样式都无法让导出后的标题居中——前者因为标题会被服务器端自动包裹在固定结构的div里，后者因为PDF导出是在服务器端执行，网页端样式无法同步生效。

可行解决方案 #

直接在header参数中传入带内联样式的完整HTML结构，跳过服务器端默认的标题包裹逻辑，让自定义样式直接被PDF渲染引擎识别：

function preview() {
    let fileNameWithTitle = MyTitle.replace(/\s+/g, '_');
    // 构造自带居中样式的标题HTML
    let PdfTitle = `
        <div style="width: 100%; text-align: center; color: rgb(117, 117, 117);">
            <h3 style="margin: 0;">${MyTitle}</h3>
        </div>
    `;
    OrgChart.pdfPrevUI.show(chart, {
        format: 'A4',
        landscape: true,
        padding: 50,
        header: PdfTitle,
        filename: `${fileNameWithTitle}_OrgChart.pdf`
    });
}

原理说明 #

服务器端导出PDF时，会直接渲染你传入header的原始HTML内容，不再用默认的#boc-header结构包裹。通过给外层div设置width:100%和text-align:center，能确保标题在PDF页面的水平范围内居中，内联样式也能被服务器端的PDF渲染流程正确解析。

如果需要匹配网页端的标题位置，还可以在自定义div的style里添加margin-top等属性调整间距。

内容的提问来源于stack exchange，提问作者Az3ssin