14

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

  • (a) 以毫米为单位的页面顶部边距（从页面顶部开始）
  • (b) 以毫米为单位的页眉边距（从页面顶部开始）

(a) 和 (b) 字段如下图所示： 边距描述

例如，如果用户提供 (a) 为 10 毫米和 (b) 为 100 毫米，则“标题区域”的高度将为 90 毫米。

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

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

目前，我正在为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 设置垂直对齐：顶部，但这也不起作用。

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

4

1 回答 1

9

编辑：仅当wkh​​tmltopdf安装在基于 Windows 的系统中时，似乎才需要此修复程序。

经过大量的试验和错误，我观察到以下逻辑似乎是可行的：

  • html-head的body元素需要设置为Header Region实际高度的1.33倍。（为什么？我不知道。这可能是由于某些 QT 或 wkhtmltopdf 渲染方式造成的，但它实际上适用于所有情况，与标题区域内容中的行无关）。
  • body 的直接（也是唯一的）子元素设置为 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 种不同的纸张尺寸（包括设置自定义page-width和page-height。还检查了不同的 Header Region 内容大小（范围从 1 行到 20 行）。

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

于 2013-03-09T10:17:33.753 回答