Wkhtmltopdf输出不一致_Html_Css_Pdf_Pdf Generation_Wkhtmltopdf

Wkhtmltopdf输出不一致

html css pdf

Wkhtmltopdf输出不一致,html,css,pdf,pdf-generation,wkhtmltopdf,Html,Css,Pdf,Pdf Generation,Wkhtmltopdf,我通过wkhtmltopdf输出一些html，并使用自定义页眉和页脚标题html如下所示： <!doctype html> <html> <head> <style> body { font-size: 12px; margin: 0; padding: 0; } .page-header {

我通过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>

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%正确，但标题没有使用线性渐变。它几乎像是完全忽略了线性渐变，因为标题只是一种纯深蓝色。正如您所看到的，页眉和页脚的html几乎完全相同，因此它对页脚而不是页眉起作用是没有意义的

如果我更改标题上的

位置：absolute

，则标题渐变会出现，但这会导致太多其他问题。

最后，我为每个td元素使用了一个带有显式宽度设置的表，这非常有效

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