使用 phantom js 打印 PDF - @page 规则不起作用答案

【问题标题】：Printing PDF with phantom js - @page rule not working使用 phantom js 打印 PDF - @page 规则不起作用
【发布时间】：2017-02-14 20:03:58
【问题描述】：

我们正在使用 phantom JS 从网页（内联网站点）打印出 PDF。我的问题不在于整个样式，而在于@page 规则。没有应用 @page 规则中的样式。

你知道这可能是什么吗？

@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;
    }
}

【问题讨论】：

希望您使用的是css3。能否请指定浏览器

标签： javascript css pdf printing phantomjs

【解决方案1】：

如图所示，描述了浏览器对@page 的支持。

【讨论】：

【解决方案2】：

我看不出您的 CSS 有问题，但它可能包含在已设置为媒体 screen 的样式表中，在这种情况下它将被忽略。

当您导入样式表时，请确保您使用媒体类型 print 或 all

<link href="main.css" media="all" rel="stylesheet" />

【讨论】：

【解决方案3】：

我认为当导出为 PDF 时，phantomJS 会自动添加 @media 打印类，这可能会覆盖您为 @page 设置的许多 css 规则。

【讨论】：