PhantomPDF CSS3 Grid
-
I've got a bunch of templates that I've been using in a custom solution that use CSS3's grid system (see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout). I know I could use Bootstrap, but it's pretty inferior in comparison to the native grid system, and I've seen/experienced issues with Bootstrap before (PRINT media type).
I've tried using using my templates using PhantomPDF and it's not working at all. The layout gets completely ruined. The same templates work fine with AthenaPDF (see https://github.com/arachnys/athenapdf CLI), however that lacks crucial features (document headers and footers being one).
Does PhantomPDF support CSS3? If not could it be updated to support it?
Thanks in advance.
-
hi! just for the record CSS Grid layout is not CSS3, it is more like CSS Next.
I've tried using using my templates using PhantomPDF and it's not working at all. The layout gets completely ruined.
Does PhantomPDF support CSS3? If not could it be updated to support it?yes, this is expected, because phantomjs is an old engine, it does not even support CSS3 fully. so CSS Grid layout in PhantomPDF recipe is practically impossible because the inner engine does not support that advanced feature of CSS. unfortunately we can't update Phantomjs to support Grid layout because it will be a lot of low level work.
however we support an electron recipe that will cover your needs with Grid Layout (you will find the same CSS support that athenapdf, since both uses electron). just follow the installation instructions to install it as part of jsreport and be able to setup correctly on linux, in the installation instructions you can also find a docker image which can simplify the setup steps.
-
however that lacks crucial features (document headers and footers being one).
about this. the jsreport electron recipe does not support these features too, but i think you can workaround that and implement similar features using the approach described in this post (more comments about that approach here)
-
Thanks for responding! My bad on the CSS3 <> grid mistake.
I've just had a look at the playground as it's got electron-pdf built-in and ready to go, however it doesn't appear to work. Is this what you're expecting:
https://playground.jsreport.net/studio/workspace/SyUrRILTg/4955
If you change to HTML generation, you'll see the grid layout I'm expecting
-
electron is a project that moves very fast, they release very often. probably our electron version in playground is just an old one that does not have CSS Grid support. but as you may saw in jsreport-electron-pdf docs you can install any version of electron in your machine, so my recommendation would be to try it locally on your machine installing a latest version of electron.
-
Ah nice. Thank you. I have a new issue now. I've installed electron-pdf on a local instance of jsreport, however this keeps happening:
Error occured - Error during rendering report: Timeout when executing in electron
logs:
+0 Starting rendering request 1139
+0 Rendering template {shortid:rkJTnK2ce, recipe:electron-pdf,engine:handlebars}
+0 Adding sample data Sy5S19ncg
+10 Replaced assets ["Bariol.ttf","NotoSans-Regular.ttf","invoice.css"]
+10 Resources not defined for this template.
+10 Base url not specified, skipping its injection.
+11 Rendering engine handlebars
+59 Taking compiled template from engine cache
+90 Replaced images ["SNIPPED"]
+92 Executing recipe electron-pdf
Stak - Error: Timeout when executing in electron
at Timeout._onTimeout (/usr/src/app/node_modules/electron-html-to/lib/dedicatedProcessStrategy.js:272:20)
at ontimeout (timers.js:386:14)
at tryOnTimeout (timers.js:250:5)
at Timer.listOnTimeout (timers.js:214:5)
-
Hang on, I'm going to try the jsreport docker image with electron-pdf pre-installed. If it works I'll figure the above out then. Thanks for the help!
-
Bingo! That worked. Thanks man. I guess I'll have to use the work around for the headers and footers. Appreciate your patience. Cheers.
-
One question. Is there anyway to enforce custom margin sizes in electron-pdf rather than using the three settings? I'd like to enforce the margin using CSS, but when content propagates across more than one page (a table) the CSS margin isn't enforced.
-
Think I found a nice work around. Page media formatting module (https://www.w3.org/TR/2013/WD-css3-page-20130314):
@page {
margin: 20px;
}Set the electron-pdf margin setting to "Default" in jsreport, and it seems to over-ride whatever margin was in place before, while propagating across multiple pages.
-
This post is deleted!
-
To conclude, unfortunately Electron doesn't seem to fully support the @page spec. I understand weasyprint does but that doesn't support grid. This is incredibly frustrating.
-
@psutton00 i feel you, no browser out there support the Paged media module completely (except for the weasyprint engine, but they lack other features too, seems like they chose the trade off of having really great support for the Paged module but sacrificing latest CSS, JS features), and if they do, things will be really more simple to do. our best chance here is chrome, hopefully one day they will see how many people are interested in this CSS feature, until then we just have to use ugly workarounds.
-
This post is deleted!
