Question

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

标题html如下：

<!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

一切都正常工作，但标题并没有使用线性渐变。它几乎像线性渐变完全被忽略，因为标题只是一个坚实的深蓝色。正如您所看到的，页眉和页脚的html几乎完全相同，因此它不适用于页脚，而不是页眉。

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

Answer 1

最后，我使用了一个表格，为每个td元素设置了明确的宽度设置，这非常有效。

Wkhtmltopdf输出不一致

1 个答案: