OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to center title in PDF Export in Balkan OrgChartJS

  • Thread starter Thread starter Az3ssin
  • Start date Start date
A

Az3ssin

Guest
Code:
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"
    });
}

Above are the code that I use to preview the pdf first before exporting. I've tried to center the element by hardcoding the tag into the title itself but it does not work because the header are actually in a tag like below:

Code:
<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>

Targeting the with id boc-header wont also work, as it only center in the website, but when exporting itself(occur at balkan server) the result will always be the title place at left side.

In case you wondering how I target the id boc-header,

Code:
<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;
});

I am not sure if this is possible. The only way to center it is by manipulating the title. As whatever stye I apply it, it follows in the exported result.

Thank you.

All detail are above

<pre><code>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"
});
}
</code></pre>
<p>Above are the code that I use to preview the pdf first before exporting. I've tried to center the element by hardcoding the tag into the title itself but it does not work because the header are actually in a tag like below:</p>
<pre><code><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>
</code></pre>
<p>Targeting the with id boc-header wont also work, as it only center in the website, but when exporting itself(occur at balkan server) the result will always be the title place at left side.</p>
<p>In case you wondering how I target the id boc-header,</p>
<pre><code><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;
});

</code></pre>
<p>I am not sure if this is possible. The only way to center it is by manipulating the title. As whatever stye I apply it, it follows in the exported result.</p>
<p>Thank you.</p>
<p>All detail are above</p>
 
Top