最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Printing PDF with phantom js - @page rule not working - Stack Overflow

programmeradmin8浏览0评论

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
Add a ment  | 

3 Answers 3

Reset to default 4 +25

As 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.

发布评论

评论列表(0)

  1. 暂无评论