We're using the phantom JS to print out PDF from web pages (intranet site). My issue is not with the whole styling but just with the @page rule. None of the styles within the @page rule are applied.
Do you have any idea what this could be?
@page {
size: auto;
padding: 0 !important;
margin: 10mm !important;
page-break-before: avoid;
border: none !important;
page-break-after: avoid;
page-break-inside: avoid;
overflow: hidden !important;
box-sizing: border-box !important;
@top-left-corner {
content: ""; /* has to be specified! */
background-color: rgba(42, 201, 80, 0.220);
border-bottom: solid green;
}
}
We're using the phantom JS to print out PDF from web pages (intranet site). My issue is not with the whole styling but just with the @page rule. None of the styles within the @page rule are applied.
Do you have any idea what this could be?
@page {
size: auto;
padding: 0 !important;
margin: 10mm !important;
page-break-before: avoid;
border: none !important;
page-break-after: avoid;
page-break-inside: avoid;
overflow: hidden !important;
box-sizing: border-box !important;
@top-left-corner {
content: ""; /* has to be specified! */
background-color: rgba(42, 201, 80, 0.220);
border-bottom: solid green;
}
}
Share
Improve this question
edited Jun 4, 2018 at 15:19
Jivings
23.3k7 gold badges62 silver badges102 bronze badges
asked Oct 6, 2016 at 7:19
TeodoraS.KTeodoraS.K
1851 silver badge9 bronze badges
1
- hope you are using css3.Can u please specify browser – this_is_om_vm Commented Jun 4, 2018 at 12:40
3 Answers
Reset to default 4 +25As the shown image describe the browser support for the @page.
I can't see a problem with your CSS, but perhaps it's contained within a stylesheet that is set to media screen
already, in which case it will be ignored.
When you import your stylesheet make sure you use media type print
or all
<link href="main.css" media="all" rel="stylesheet" />
I think that when exporting to PDF, phantomJS automatically adds the @media print class which may override many of the css rules you set for the @page.