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"
});
}
Here is the code snippet used to preview the PDF before exporting. An attempt was made to center the element by embedding the <center> tag within the title itself, but this did not yield the desired result due to the actual placement of the header inside a <h3> tag as shown below:
<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>
Attempts to target the <div> with id boc-header were unsuccessful as it only centered on the website display, whereas during export (which occurs on the Balkan server), the title remained positioned at the left side.
If you're curious about how the id boc-header was targeted, see the CSS styles below:
<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;
});
It seems unlikely that centering the title using CSS will reflect in the exported result. Manipulating the title itself may be the only viable option for achieving the desired alignment in the output.
Thank you for considering these details.
All relevant information has been provided above.