パラグラフを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)

私が使用しているしてください： "text_land"

編集上の

background-color: white; 

：

を私はそれがHTML要素ツリーを解析し、自分のスタイルに応じて描画html2canvas.jsを調べました。

最上位のhtml要素の幅 - レンダリングされたツリーの "text_land"は、結果のイメージの幅と見なされました。ページズーム後の "text_land" divの外に出たものはすべてレンダリングされませんでした。

アイデアは印刷用に別々のスタイルを持つことです。私はあなたのフィドルの両方に再加工し、何かの作業を思い付いたの

Answer 2

、このフィドル私はhtml2canvasライブラリを使用していた

$(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'); 
}); 

}); 

を見てしてください。

ここにはa link to fiddle！

---

UPDATED FIDDLE！

---

updated fiddle where resizing windows does not affect the oucome