Wkhtmltopdf 输出不一致

Question

我正在通过 wkhtmltopdf 输出一些 html，并使用自定义 header 和页脚。

headerhtml如下：

<!doctype html>
<html>
<head>
    <style>
        body {
            font-size: 12px;
            margin: 0;
            padding: 0;
        }

        .page-header {
            background: #2A5266 -webkit-linear-gradient(
                left,
                #cbd5da 0,
                #cbd5da 50pt,
                white 50pt,
                white 75pt,
                #cbd5da 75pt,
                #cbd5da 100pt,
                white 100pt,
                white 125pt,
                #2A5266 125pt,
                #2A5266
            );
            height: 72pt;
            border: none;
            margin: 0;
            padding: 0;
            width: 100%;
            position: relative;
            display: block;
        }
    </style>
</head>
<body>

    <div class="page-header">
    </div>

</body>
</html>

页脚 html 是：

<!doctype html>
<html>
<head>
    <style>
        body {
            font-size: 12px;
            margin: 0;
            padding: 0;
        }

        .page-footer {
            background: #2A5266 -webkit-linear-gradient(
                left,
                #cbd5da 0,
                #cbd5da 50pt,
                white 50pt,
                white 75pt,
                #cbd5da 75pt,
                #cbd5da 100pt,
                white 100pt,
                white 125pt,
                #2A5266 125pt,
                #2A5266
            );
            height: 26pt;
            border: none;
            margin: 0;
            padding: 0;
            width: 100%;
            position: relative;
            display: block;
        }
    </style>
</head>
<body>

<div class="page-footer"></div>

</body>
</html>

我使用的命令如下：

wkhtmltopdf -L 0cm -R 0cm -T 2.75cm -B 0.7cm -O landscape --footer-html http://foo.com/footer --header-html http://foo.com/header --header-spacing 5 http://foo.com/html output.pdf

一切正常 100%，但 header 没有使用 linear-gradient。它几乎就像 linear-gradient 被完全忽略了，因为 header 只是纯深蓝色。如您所见，header 和页脚的 html 几乎相同，因此它适用于页脚而不适用于 header 是没有意义的。

如果我更改 header 上的 position:absolute，则会出现 header 渐变，但这会导致太多其他问题。

Answer 1

最后我使用了 table 并为每个 td 元素设置了明确的宽度，效果非常好。

Wkhtmltopdf 输出不一致

Wkhtmltopdf inconsistent output

html

css

pdf

pdf-generation

wkhtmltopdf