將段落保存爲PDF動態？

Question

是否可以使用JSPDF保存包含邊框爲PDF的段落<p>，合併格式並將元素保留在頁面中央？

以下代碼允許在將文本粘貼到textarea時生成段落。正如在Fiddle中所演示的，似乎可以將表格保存爲PDF。

---

但是，是否可以將以下動態段落和邊界動態保存爲PDF？

如果可以提供更新的小提琴，那將非常感謝，因爲我仍然是編碼新手。

JSFiddle

謝謝！

HTML：

<div align="center"> 
    <h4 align="center"> 
     <u>Paste text in the field below to divide text into paragraphs.</u> 
    </h4> 
    <textarea placeholder="Type text here, then press the button below." cols="50" id="textarea1" rows="10"> 
    </textarea> 
    <br><br> 
    <button id="Go">Divide Text into Paragraphs!</button> 
</div> 
<hr> <h2 align="center">Dynamic Paragraphs will appear below: <br>[Paragraphs below for saving as PDF]</h2> <div> <div align="center" id="text_land" style="font-family: monospace"> </div></div> 

JQuery的：

$(function(){$("#Go").on("click",function(){for(var t=$("textarea").val(),e=300;t.length;){for(;t.length>e&&" "!==t.charAt(e);)e++;$("#text_land").append("<br></br><p>"+t.substring(0,e)+"</p><br></br>"),t=t.substring(e),e=300,$("p").attr("contenteditable","true"),$("p").addClass("text")}})}),$("select").on("change",function(){var t=$("#text_land p"),e=this.dataset.property;t.css(e,this.value)}).prop("selectedIndex",0),end; 

CSS：

@media print{p{page-break-inside:avoid}}p{position:relative}@media print{.no-print,.no-print *{display:none !important}}p{border-style:solid}p{color:#000}p{display:block;text-align:justify;border-width:5px;font-size:19px}p{overflow:hidden;height:300px;width:460px;word-wrap:break-word} 

Answer 1

我編輯了自己的代碼。請see your sample here (edited)

我用：

background-color: white; 

的 「text_land」

編輯：

我檢查html2canvas.js它解析HTML元素樹，並提請根據自己的風格。

渲染樹的最頂部html元素「text_land」的寬度被視爲生成圖像的寬度。在頁面縮放之後超出「text_land」div的所有內容都未呈現。

這個想法是有獨立的打印樣式。

Answer 2

我沒有返工的兩個小提琴，並與一些工作來了，請看看這個小提琴

$(document).on('click','#Go',function(){         
var value = $('#textarea1').val(); 


a=value.replace(/\r?\n/g,'<br/>'); 
$('#text_land p').html(a); 
console.log(a); 
}); 

$(document).on('click','#print',function(){ 


var pdf = new jsPDF('p', 'pt', 'letter'); 
pdf.addHTML($('#text_land')[0], function() { 
pdf.save('Test.pdf'); 
}); 

}); 

我用html2canvas庫。

Here's a link to fiddle！

---

UPDATED FIDDLE！

---

updated fiddle where resizing windows does not affect the oucome