HTML頁面爲PDF問題

我擁有的項目是創建一個類似Vista應用程序的打印。我創建了一個非常基本的界面，在可拖動區域放置可調整大小的div。我也可以通過帶設計模式的彈出式iframe將文本放入此div。然後我把它寫入數據庫。然後我使用Coldfusions cfdocument調用這些數據並創建一個pdf。HTML頁面爲PDF問題

問題是當創建PDF時，字體看起來稍微粗一點，而且換行與HTML頁面接口不同，這非常重要。注意：換行字由div的高度和寬度決定。它在cfdocument進程頁面上看起來很好，它在pdf創建時剛剛關閉。任何人有任何想法或可以指向我可以幫助一些信息？

在此先感謝。

代碼這裏：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<cfset webRes = "96"> 
<cfset pxlWidth = "921"> 
<cfset pxlHeight = "1178"> 
<cfset inWidth = (pxlWidth/webres)> 
<cfset inHeight = (pxlHeight/webres)> 

<cfquery name="qTextData" datasource="ds"> 
SELECT  DocID, TextID, Width, Height, PosX, PosY, FontFamily, FontColor, FontSize, TextValue 
FROM   TextEditor 
WHERE  ((DocID = #session.docid#)) 
</cfquery> 


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Create PDF</title> 
</head> 
<cfoutput> 
<cfdocument filename="mypdf.pdf" name="mypdf" fontembed="yes" format="pdf" overwrite="yes" pageheight="#inHeight#" pagewidth="#inWidth#" pagetype="custom"> 
    <cfdocumentsection margintop="0" marginright="0" marginbottom="0" marginleft="0"> 
     <body align="center" marginheight="0" marginwidth="0"> 
      <div id="pageContainer" style="background-image:url(resources/image.caspx.jpg); background-repeat:no-repeat; height:#pxlHeight#px; width:#pxlWidth#px;"> 
       <cfloop query="qTextData"> 
        <div id="divTextField_#TextID#" style="position:absolute; top:#PosY#px; left:#PosX#px; width:#width#px; height:#Height#px; color:#FontColor#; font-family:#FontFamily#; font-size:#FontSize#pt; vertical-align:text-top; line-spacing:normal;"> 
         #TextValue# 

        </div>     
       </cfloop> 
      </div> 
     </body> 
    </cfdocumentsection> 
</cfdocument> 
</cfoutput> 

<script type="text/javascript"> 
    window.open('http://linktopdf/mypdf.pdf','newWin','resizable=1'); 
</script> 
</html>

來源

2013-01-08 SGekko

這似乎有點明顯，但以防萬一 - 你需要確保DIV大小和PDF框中該頁面的大小相同。您還需要確保字體大小相同。如果在轉換爲PDF時不重現Web環境，它看起來將不會相同。 –

謝謝你，但我抓住了div的大小，並用它來重現這個pdf。我也使用相同的字體和磅尺寸。正如我所說的PDF字體看起來稍厚，我想知道是否導致文字換行問題。但是這沒有意義，因爲字體和大小是相同的。 – SGekko

如果您分享相關代碼，我們可以爲您提供更多幫助。 –

我試圖使這個評論，但我開始長篇大論，所以它可能不是「答案」它太大了，但如果沒有別的我敢肯定它會有一些有用的信息。

你在看什麼％，你有沒有試過打印出來？

我注意到事情可能看起來不平衡或比平常要大，因爲它們在雜技演員（或您選擇的PDF閱讀器）中顯得很怪異。嘗試調整縮放比例並查看顯示是否更改，並查看打印是否正確。

我也發現，像James建議的那樣，我需要特殊的css來處理文檔。 CSS可能很奇怪，因爲div的一邊有一個1px的較大邊框，以使其看起來正確。另請注意，儘管您在屏幕上查看PDF仍然是"print"媒體。 PT表示1/72英寸，當您從19英寸顯示器（進一步受像素分辨率影響）縮放至8.5「x 11」的紙張時，該尺寸看起來會更大，而該紙張並不真正知道像素是什麼是。您可能需要嘗試隨時調整字體大小，如：font-size: #fontSize-2#pt;。將-2更改爲適用於您輸出的任何內容。您也可以嘗試使用可縮放的單位，如em。

cfdocument docs列出了支持的所有CSS以及確定一些限制。它似乎並不支持line-spacing:normal;。還要確保所有的CSS都包含在內嵌或樣式標籤中，但避免使用鏈接的.css文件。我看到你正在這樣做，只是添加提示和指針。

此外，根據該文檔：

的ColdFusion 的<cfdocument></cfdocument>對外側不返回HTML和CFML。

這意味着ColdFusion的正在處理您的cfset聲明，但它不返回

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Create PDF</title> 
</head>

和

<script type="text/javascript"> 
    window.open('http://linktopdf/mypdf.pdf','newWin','resizable=1'); 
</script> 
</html>

所以這是可能的，iText的是不是渲染它，你會因爲

它沒有一個DOCTYPE
這是一種病態的HTML文檔

來源

2013-01-09 12:10:09 Travis

謝謝你們的輸入。我會做一些調整，看看會發生什麼。再次感謝。 – SGekko

HTML頁面爲PDF問題

回答

相關問題