0

我正在尝试为pdf打印输出生成一个页面（静态html，一些用php生成的部分）。

这是特定于页面打印版本的 CSS。还有其他格式规则，但它们不在“@media print”标签内：

@media print {
    @page {
        @top-right {
            content: "99999999 | L.L.O.";
        }
        orphans: 4;
        widows: 3;

    }

    @page:margin {
        margin: 2cm;
    }

    @page :first {
        margin-top: 10cm;
    }

    @page :left {
        margin-left: 3cm;
        margin-right: 2cm; 
    }

    @page :right {
        margin-left: 2cm;
        margin-right: 3cm;
    }

    div.divHeader {
        position: fixed;
        padding-bottom: 30px;
        top: 0;
        text-align: right;
        float: right;
    }

    .do_not_print {
        display: none;
    }
}

这些样式在每种类型的浏览器上给出了截然不同的结果：

  • OS X (WebKit) 上的 Safari：忽略所有 @page 规则，部分呈现 divHeader 但仅在第一页，并且不呈现文本对齐、填充或浮动命令，在 div 上呈现“page-break-inside”
  • OS X (Gecko) 上的 Firefox：类似于 Safari，但在所有页面上呈现 divHeader
  • OS X (Presto) 上的 Opera：渲染边距命令！，在随机页面上渲染 divHeader（但不是它的填充组件），但只打印前 4 页（共 14 页！）
  • PC 上的 IE（Trident）：主要呈现边距（除了边距顶部），仅打印前两页，但覆盖第一页之后的各个 div，打印头部并渲染定位部分

我真的希望你会发现我的代码有问题......

感谢您的关注！

4

1 回答 1

0

经过一番挖掘，更改了代码的多个方面，可以优化 Firefox 的输出。Safari、Opera 和 IE 仍然很糟糕。Safari/WebKit 有一些错误，导致无法呈现正在运行的头部。可以为 Opera 和 IE 调整这个 css。

@media print {

    @page {
        margin: 2cm;
        orphans: 5;
        widows: 5;
    }

    .title {

        margin: 10cm 0 0 0;
        page-break-after: always;
        display: block;

    }


    div.divHeader {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        margin: 10px;
    }

    img {

        max-width: 98% !important;
        page-break-inside: avoid;

    }

    .do_not_print {
        display: none;
    }
}
于 2013-10-19T15:35:36.357 回答