将段落动态保存为 PDF？

Question

是否可以使用 JSPDF 将包含边框的段落<p> 保存为 PDF，合并格式并将元素保持在页面中心？

以下代码允许在将文本粘贴到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 库。

这里是a link to fiddle！

---

UPDATED FIDDLE!

---

updated fiddle where resizing windows does not affect the oucome