Question

在我的应用程序中，允许用户定义自己的标题和边距以进行打印。对于标题，用户可以提供以下两个字段：

（a）以mm为单位的页面上边距（从页面顶部开始）
（b）标题边距（mm）（从页面顶部开始）

字段（a）和（b）如下图所示： Margins depiction

例如，如果用户提供（a）10mm和（b）为100mm，那么'Header Region'的高度将为90mm。

现在标题中的内容需要在标题区域的顶部对齐。

有没有办法设置标题区域高度并在此标题区域内对齐内容。

目前，我正在为 header-html 选项执行以下操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />

    <style type="text/css">
        body 
        {
            border:0; 
            margin: 0;
            padding: 0;
            height: 90mm;  //in actual program, this is set dynamically in PHP
        }
    </style>

    <script type="text/javascript">
    function subst() 
    {
        //process the GET parameters and accordingly set the Header Region text info
    }  
    </script>
</head>

<body onload="subst()">
    <div>
        //text
    </div>
</body>  
</html>

margin-top 选项设置为100mm。

我已尝试为 body CSS设置 vertical-align：top ，但这也无效。

我实现的最终输出似乎没有将页眉区域内容垂直对齐在顶部或中间。它位于Header Region中间的某个地方。

Answer 1

修改：只有在基于Windows的系统中安装 wkhtmltopdf 时才需要此修复。

经过大量的反复试验，我发现以下逻辑似乎有效：

html-head 的 body 元素需要设置为标题区域实际高度的1.33倍。（为什么？我不知道。这可能是由于某些QT或wkhtmltopdf渲染方式，但它实际上适用于所有情况，无论标题区域内容中的行如何）。
正文的直接（也是唯一）子元素设置为100％高度并隐藏溢出的内容

因此， html-head 的更改代码（对于上面的示例）如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />

    <style type="text/css">
        body 
        {
            border:0; 
            margin: 0;
            padding: 0;
            height: 120mm;
            /*
            In the actual program this height is calculated dynamically in PHP as
            ($headerMargin - $topMargin) * 1.33
            */
        }

        #master-div
        {
            overflow: hidden;
            height: 100%;
        }

    </style>

    <script type="text/javascript">
    function subst() 
    {
        //process the GET parameters and accordingly set the Header Region text info
    }  
    </script>
</head>

<body onload="subst()">
    <div id="master-div">
        //The actual content goes here
    </div>
</body>  
</html>

我已经检查了至少7到8种不同的纸张尺寸（包括设置自定义页面宽度和页面高度。还检查了不同的标题区域内容大小（从1行到20行不等。

唯一的问题是，只有当页眉边距（b）/页脚边距小于或等于纸张高度的三分之一时，这个标题区域高度的1.33倍的逻辑似乎才有效。如果边距高度超出该范围，则随着边距高度的增加，内容会被剪裁。但是我猜通常不需要具有如此大的标题高度。

标题高度和页面顶部的位置标题在wkhtmltopdf中

1 个答案: