用幻影js打印PDF - @page规则不起作用

Question

我们正在使用幻像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;
    }
}

Answer 1

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

Answer 2

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

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

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

Answer 3

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