wkhtmltopdf 页脚大小问题答案

【问题标题】：wkhtmltopdf footer size issueswkhtmltopdf 页脚大小问题
【发布时间】：2014-12-12 12:22:21
【问题描述】：

我在将 HTML 文件转换为 pdf 时遇到问题，尝试添加页脚时，呈现为 PDF 的大小不是 css 中指定的大小。

页脚的大小必须正好是 155 毫米，但如果我告诉 wkhtml2pdf 有 155 毫米的底部边框，页脚几乎从页面的一半开始。

我尝试使用 50mm 的简单 html 页面，每条 5 条 10mm，使用开关 -B 50mm 我在 50mm 的实际页脚下方有一个边距

我正在运行的命令是：wkhtmltopdf.exe -B 150mm -L 0 -R 0 -T 0 --footer-html footer.html page.html page.pdf

要正确放置页脚，我必须使用-B 119mm

有人可以帮助我或指出正确的方向吗？我阅读了很多关于此的帖子，但无法解决我的问题，似乎 windows 安装的行为与 Linux 不同，但我只会将它安装在 windows 主机上，所以关于纯 windows 的解决方案没有问题

page.html

<!doctype html>

<html lang="fr">
<head>
  <meta charset="utf-8">

  <title>Header</title>

  <link rel="stylesheet" href="css/normalize.css?v=1.0">

  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
coucou

</body>
</html>

footer.html

<!doctype html>

<html lang="fr">
<head>
  <meta charset="utf-8">

  <title>Footer</title>

  <link rel="stylesheet" href="css/normalize.css?v=1.0" media="all">
  <link rel="stylesheet" href="css/footer.css?v=1.0" media="all">

  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>

    <div id="bvr">

        <div class="bvr-cut">
            <div class="payment-recipient">
               blahblah
            </div>
            <div class="payment-account">01-88205-8</div>
            <div class="payment-amount">
                <span class="val">3</span>
                <span class="val">2 5</span>
            </div>
            <div class="payment-sender">
               blahblah
            </div>
        </div>

        <div class="bvr-cut">
            <div class="payment-recipient">
               blahblah
            </div>
            <div class="payment-account">01-88205-8</div>
            <div class="payment-amount">
                <span class="val">3</span>
                <span class="val">2 5</span>
            </div>
            <div class="payment-sender">
               blahblah
            </div>
        </div>
        <div class="bvr-code">
            <div class="col c12">
               blahblah       
            </div>
        </div>
    </div>

</body>
</html>

footer.css

@charset "UTF-8";

#bvr {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    background: #FC0;
    font-family: "Helvetica-Neue", Helvetica, sans-serif;
    height:155mm;
    page-break-after: auto;
    display: block;
    clear: both;
    border: 1px solid #000;
}

.bvr-cut {
    float:left;
    width: 230px;
    background: #ccc;
}

.payment-recipient {
    height: 72px;
    position: relative;
    background: #0cf;
}

.payment-account {
    text-align: right;
    font-weight: 600;
    padding-right: 4.5em;
    margin-bottom: .6em;
    background: #12F;
}

.payment-amount {
    background: #FCC;
    text-align: right;
    margin-bottom: .8em;
}

.payment-amount > span.val {
    border: 1px solid #000;
    padding-right: 2em;
}

.payment-sender {
    position: relative;
    background: #f0c;
}

.bvr-ref {
    display: block;
    background: #FF0;
}

.bvr-code {
    background: #c0f;
}

【问题讨论】：

我想说在 wkhtmltopdf github 页面上提出一个关于这个问题的问题可能是个好主意，因为可能存在一些已知问题。
我会尝试在他们的页面上提出问题，感谢您的建议

标签： php html wkhtmltopdf

【解决方案1】：

经过搜索，发现问题不是来自wkhtmltopdf，而是windows系统中处理后的大小问题。

如果我在基于 unix 的系统上运行该代码，一切都会很好，但在 Windows 上却不行。事实上，windows 中的字体大小（以及任何其他大小：高度、宽度等）必须以 1.33 的比例缩放，以便呈现与 unix 中完全相同的渲染。

我找不到英文链接，但这里有一个 little explaination 对我来说非常有用（在网页中搜索“1.33”）。

基本上，我在我的 css 中创建了两个类：

html: { font-size: 93.1%; }
body: { height: 88mm; }

/*–––––––––––––––––––––––– system hacks –––––––––––––––––––––––– */

/**
 * Unix* system based servers render font much
 * bigger than windows based server.
 * Force windows font to 100% and rescale the
 * linux rendering by the magic factor (1.33)
 */
.linux {
  font-size: 70%;
}

/**
 * base size: 88mm
 *
 * for wkhtmltopdf generation,
 * body size must be multiplied by 1.33 factor on windows systems
 */
.win body {
  height: 117.04mm;
}

通过一点 php，我已经根据服务器系统将类动态添加到 <html> 标记中。

【讨论】：