Our state of the art Gantt chart


Post by kamran812 »

I have added Export to pdf btn and it is working as well but the pdf generated is not what we suppose to get.
I have added it from the demo of pdf in examples.
Below is the code.

code in features:

pdfExport : {
				exportServer: 'https://dev.bryntum.com:8082',
				headerPdf,
				footerPdf
			},

Btn in tbar

{
				type : 'button',
				ref : 'exportButton',
				icon : 'b-fa-file-export',
				text : 'Export to PDF',
				onClick() {
					gantt.features.pdfExport.showExportDialog();
				}
			}

header footer of pdf

//Export to PDF HTML header footer
	const headerPdf = ({ currentPage, totalPages }) => `
		<div class="export-header">
			<img src="resources/logo.png"/>
			<dl>
				<dt>Date: ${DateHelper.format(new Date(), 'll LT')}</dt>
				<dd>${totalPages ? `Page: ${currentPage + 1}/${totalPages}` : ''}</dd>
			</dl>
		</div>`;

const footerPdf = () => '<div class="demo-export-footer"><h3>© 2022 Bryntum AB</h3></div>';

CSS :

/* export PDF header and button */
.pdf-export-header {
    text-align: left;
    padding: 8px 0 0 10px;
    height: 40px;
    color: #fff;
    background: #0066a6;
    position: relative;
}
.pdf-export-header img {
    height: 80%;
}
.pdf-export-header dl {
    top: 50%;
    right: 1em;
    transform: translateY(-50%);
    margin: 0;
    font-size: 10px;
    position: absolute;
}
.pdf-export-header dd {
    margin: 0;
}

.b-export-footer {
    color: #fff;
    background: #0066a6;
}

.pdf-export-footer {
    text-align: center;
}
Attachments
Screenshot 2022-11-30 144059.png
Screenshot 2022-11-30 144059.png (63.38 KiB) Viewed 452 times

Post by kamran812 »

Can you please help me with this?

Thank you


Post by marcio »

Hey kamran812,

Are you importing the CSS files correctly?? That looks like a missing styling files, as the export looks correctly.

Best regards,
Márcio


Post by kamran812 »

yes using our own css file in which the above mentioned css is there, and other one is gantt.stockholm.css

<link rel="stylesheet" href="/css/bryntum_gantt/gantt_omg.css" type="text/css" media="all" />
<link rel="stylesheet" href="/common/css/bryntumGantt/gantt.stockholm.css" type="text/css" media="all" />

Everything else is working fine the Gantt area.
Dose we need anything else apart from these?


Post by kamran812 »

Not working fine the PDF thing. Please help


Post by kamran812 »

Does this server is working fine?

exportServer: 'https://dev.bryntum.com:8082',

Post by tasnim »

Yes. it's working fine. Could you please provide us a runnable test case so we can debug it?


Post by kamran812 »

Same issue I pick the code from your demo pdf demo for vanilla JS export server is working but it is returning a file without CSS or alignment like I mentioned above. Also added the CSS mentioned in the demo and also the native file of stockholm.css.

Issue remains the same pdf is downloading without any CSS and alignment. Can you please mention what css is needed for the pdf ??


Post by alex.l »

Hi,

You should never use our dev server for your applications. You need to create your own server following these instructions
https://github.com/bryntum/pdf-export-server/blob/main/docs/architecture.md
It has all details regarding to placing CSS and troubleshooting. Especially here https://github.com/bryntum/pdf-export-server/blob/main/docs/architecture.md#to-generate-pdf-successfully-we-need-to-make-sure-resources-requested-by-the-page-are-accessible-to-the-page

All the best,
Alex


Post by kamran812 »

Hi Alex,
Can we use this server for the time being

exportServer: 'https://dev.bryntum.com:8082',

until we implement our own Node server on our servers? Need some setup before we install node and NPM etc. for the export server because we are currently using PERL and its package managers for server side programming.

We are missing the CSS and resources from it as the server call is going but returning the file without any layout and CSS. How to pass the css to your server while it is converting the html to pdf?

Note: this is only a temporary solution as we are going to have our own export server in near future.


Post Reply