CFDOCUMENT PDF问题与自动换行和边框

Question

我正在尝试编写一个项目，用户可以在其中添加文本到模板传单，然后创建一个pdf用于打印。我想使用html元素而不是svg主要是因为易于添加拖动，调整大小和自动换行功能。然后我使用cfdocument来创建pdf。我遇到的问题是在浏览器中看到的自动换行与pdf不匹配。我还注意到pdf中背景图像周围的边框。有谁知道为什么会出现这些问题？感谢。

这是浏览器视图

这是pdf结果。 pdf在图像周围也有一个白色边框。

模板通过cfinclude显示。

<cfsavecontent variable="canvas">                          
  <cfinclude template="templates/T080764_1.htm">
</cfsavecontent>
<cfoutput>#canvas#</cfoutput>

模板代码。

<img id="t0-1-img_1" class="item ui-resizable" style="left: 0px; top:  0px; width: 816px; height: 1056px; z-index: 1;" src="http://images/template-1.jpg" unselectable="true">
<div id="ti0-text_1" style="position:absolute; left:10px; top:10px; width:450px; height:auto; text-align:left; font-family:Verdana; font-size:10pt; cursor:pointer; z-index: 2;"></div>

用户单击“添加文本”按钮，文本将添加到带有jquery的ti0-text_1 div中。

$(function() { 
    $(".textbutton").click(function() {

        //straight text
        var txt = $("#text-field_1").html();
        $("#ti0-text_1").append(txt);           

    });
});

画布数据通过表单提交到带有cfdocument代码的页面。

<cfdocument format="pdf" filename="pdf/#form.filename#" scale="100"  localurl="true" fontembed="yes" pageheight="11" pagewidth="8.50" unit="in" pagetype="custom"
 margintop="0" marginleft="0" marginright="0" marginbottom="0" overwrite="yes">
<cfoutput>#form.data#</cfoutput>
</cfdocument>