14

私のアプリケーションでは、ユーザーは印刷用に独自のヘッダーと余白を定義できます。ヘッダーの場合、ユーザーは次の 2 つのフィールドを指定できます。

  • (a) Page Top Margin (mm) (ページの上から)
  • (b) ヘッダー余白 (mm) (ページの上から)

フィールド (a) と (b) は、次の図に示すとおりです。 マージン描写

たとえば、ユーザーが (a) を 10mm、(b) を 100mm と指定した場合、「ヘッダー領域」の高さは 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を設定しようとしましたが、それもうまくいきませんでした。

私が達成した最終出力では、ヘッダー領域のコンテンツが上部または中央に垂直に配置されていないようです。ヘッダー領域の中央の少し上にあります。

4

1 に答える 1

9

編集: この修正は、 wkhtmltopdfが Windows ベースのシステムにインストールされている場合にのみ必要なようです。

多くの試行錯誤の後、次のロジックが機能しているように見えることがわかりました。

  • html-headのbody要素は、ヘッダー領域の実際の高さの 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の設定を含む) についてこれをチェックしました。また、異なるヘッダー領域のコンテンツ サイズ (1 行から 20 行の範囲) でチェックしました。

唯一の問題は、ヘッダー領域の高さの 1.33 倍というこのロジックは、ヘッダー マージン (b)/フッター マージンが用紙の高さの 3 分の 1 以下の場合にのみ機能するように見えることです。マージンの高さがそれを超えると、マージンの高さが増加するにつれてコンテンツが切り取られます。しかし、そのような大きなヘッダーの高さは、通常は必要ないと思います。

于 2013-03-09T10:17:33.753 に答える