Friday, 2 June 2017

Controlling layout of phantom-html2pdf document

I'm using phantom-html2pdf to generate pdfs dynamically in a Node app. The conversion works but the layout is completely off. For example the html document is a form that consists of sections sometimes with two columns side-by-side. After the PDF conversion everything is in one column and generally pretty ugly.

I've tried adding custom CSS and adding pageSize values but no matter what I do it's not producing the result I need.

Here is what I have in options at the moment. Note I've passed through some css where I try to "reshape" the document to make it more like the original HTML but it seems to have limited effect on the final layout. Also I set a negative border which helps a bit but doesn't remove PDF border completely as I'd like.

Just one detail, I am using MUI css for some styling and layout which has been in-lined into the HTML before the PDF conversion.

 var pdfOptions = {
    html: html, // html with in-lined MUI styles
    css: pdfCss, // This CSS seems to have has limited control over final layout
    paperSize: {format: 'A4', orientation: 'portrait', border: '-2cm'}
  }

If anyone has any advice on how to get more control over the layout to make it look more like my HTML I'd be very grateful. Cheers!



via mikeym

No comments:

Post a Comment