Высота заголовка и позиционирования заголовка сверху страницы в wkhtmltopdf

В моем приложении пользователю разрешено определять собственные заголовки и поля для печати. Для заголовка пользователь может предоставить следующие два поля:

  • (a) Верхняя граница страницы в мм (вверху страницы)
  • (b) Маркер заголовка в мм (вверху страницы)

Поля (a) и (b) приведены на рисунке ниже: Margins depiction

Например, если пользователь предоставляет (а) как 10 мм и (б) как 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 устанавливается как 100 мм.

Я попытался установить vertical-align: top для тела CSS, но это тоже не сработало.

Конечный результат, который я достигаю, похоже, не имеет содержимого области заголовка, выровненного вертикально или сверху. Это где-то чуть выше середины области заголовка.

Ответы

Ответ 1

Изменить. Это исправление, по-видимому, требуется только тогда, когда wkhtmltopdf установлен в системе на базе Windows.

После многих проб и ошибок я заметил, что следующая логика, похоже, работает:

  • Элемент body html-head должен быть установлен на высоту в 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 строк).

Единственный улов в том, что эта логика в 1,33 раза превышает высоту области заголовка, кажется, работает только в том случае, если маржа заголовка (b)/нижнего предела меньше или равна одной трети высоты бумаги. Если высота поля выходит за пределы того, что содержимое обрезается по мере увеличения высоты поля. Но иметь такие большие высоты заголовка, как правило, не требуется, я думаю.