2013-03-08 183 views
11

在我的應用程序中,允許用戶定義自己的頁眉和頁邊空白進行打印。 對於報頭,用戶可以提供以下兩個字段:wkhtmltopdf頁眉頂部的標題高度和定位標題

  • (一)頁上邊距在毫米(從頁面頂部)
  • (b)中頁眉邊距以毫米(從頂部頁)

的字段的(a)和(b)作爲顯示在下面的圖中: Margins depiction

例如,如果用戶爲10毫米提供了(a)和(b)爲100mm時,那麼「標題區域」的高度將是90mm。

現在標題內的內容需要在標題區域的頂部對齊。

有沒有辦法設置標題區域的高度,並在這個標題區域內的頂部對齊內容。

目前,我做爲報頭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> 

邊距選項被設置爲100毫米。

我已經嘗試設置垂直對齊:頂部身體 CSS,但同樣沒有工作。

我實現的最終輸出似乎沒有標題區域內容在頂部或中部垂直對齊。它位於標題區域中間的某處。

+0

嘗試使用用於'spacing'的wkhtmltopdf標誌除了'餘量-top' – Unixmonkey 2013-03-08 19:11:09

+0

@Unixmonkey:頭標區的內容不具有固定的大小。用戶可以自由提供任何不。標題內容的行數。所以間距不能預先固定。另外,我之前沒有提到,即使紙張大小是用戶定義的。 – mohitp 2013-03-08 19:28:40

回答

8

編輯:此修復程序似乎只有當wkhtmltopdf安裝在基於Windows的系統是必要的。

大量的試驗和錯誤之後,我觀察到下面的邏輯似乎是工作:

  • HTML頭的元素需要被設置爲一個高度的1.33倍實際標題區域的高度。 (爲什麼?我不知道,這可能是由於某種QT或wkhtmltopdf渲染方式引起的,但它實際上適用於所有情況,無論標題區域內容中的行如何)。
  • 立即(以及只)身體的子元素被設置爲100%的高度,並隱藏HTML頭溢出內容

所以,改變後的代碼(上面的例子)看起來像這樣:

<!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> 

我已經檢查此爲atleast 7〜8不同的紙張大小(包括設置定製頁面寬度頁面高度。還用不同的標題區域內容大小(從1行到20行)進行檢查。

唯一的問題是,只有頁眉邊距(b)/頁邊距小於或等於紙高度的三分之一時,標題區高度的1.33倍的邏輯似乎才起作用。如果邊距高度超出了邊界高度增加時內容被剪切的程度。但是,我想,通常不需要擁有如此大的標題高度。

+0

我能夠對付使用你提供的知識的PDF,但我還是有點困惑的利潤和定位。此外,我的PDF已經生成空白頁面(只有標題),這導致我相信內容推動下一頁的東西。 – marquito 2013-09-05 21:04:52

+0

你能詳細說明你的問題嗎?另請注意,只有在Windows計算機上運行wkhtmltopdf時,問題和解決方案纔會生效。如果最後的主機將在Linux機器上完成,則不會發生上述問題。在這種情況下(在Windows上進行開發並在Linux上進行託管),您必須單獨處理兩種情況,即針對每種情況都有不同的PHP/CSS。至少這是我所做的。 – mohitp 2013-09-06 06:33:17

+0

我正在使用Windows,因爲我們的解決方案是基於ASP.NET的。儘管我還沒有弄清楚數字(我可以在經過一些試驗和錯誤之後做到這一點),但我仍然能夠管理正確的標題。使用以下命令http://bit.ly/1acl3DW這是從ASP.NET產生:你可以在這裏看到一個PDF例如http://pastebin.com/KdMCv8VB – marquito 2013-09-06 13:26:19