动态保存段落为PDF？

Question

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

以下代码允许在将文本粘贴到textarea中时生成段落。正如在此Fiddle中展示的那样，似乎可以将表格保存为PDF。

---

然而，是否可能将以下动态段落和边框作为PDF动态保存？

如果可以提供更新的JSFiddle链接，将不胜感激，因为我还是编程新手。 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}

- Dave

Answer 1

我已经编辑了你的代码。请在这里查看编辑后的示例。

我使用了：

 background-color: white;

关于"text_land"：

编辑:

我检查了html2canvas.js它解析HTML元素树并根据其样式进行绘制。

渲染树中顶部HTML元素“text_land”的宽度被视为生成图像的宽度。在页面缩放后，超出“text_land”div范围的内容不会呈现。

想法是为打印设置单独的样式。

- Tornike Shavishvili

---

然而，当调整窗口大小或缩放时，实际段落元素的大小会改变，而不是保存为PDF时指定的大小。此外，PDF文档将段落分成两个单独的页面，而不是通过边距允许段落移动到下一页。因此，是否有可能解决这些问题？ - Dave

@Dave 将 pagesplit: true 更改为 pagesplit: false，以便不进行分页，并且由于您在 p 上有固定宽度，因此窗口的宽度无关紧要。如果您希望 p 跟随窗口变化，请将 p 的规则更改为百分比，例如 width:80%;min-width:460px;。 - Asons

此外，保存为PDF时文本似乎模糊不清。这是一个可以解决的问题吗？因为它似乎是html2canvas的一个问题。 - Dave

关于生成的PDF文件模糊的问题-是的，我也注意到了。还有一件事情，我也注意到了：当我使用jspdf设置A4纸张尺寸（单位为毫米），并创建与我为jspdf设置的相同尺寸的html div时，div在宽度和高度上呈现比jspdf纸张尺寸大得多。 我认为这与用户系统的像素密度有关：jspdf使用小像素密度。我假设jspdf的低像素密度与用户的像素密度相比也应该是导致结果pdf模糊的原因之一。我需要进一步调查。 - Tornike Shavishvili

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库。

这里是fiddle的链接！

---

更新后的FIDDLE！

---

更新的代码片段，在该片段中调整窗口大小不会影响结果

- Siddharth

---

然而，当生成为PDF时，段落框似乎与fiddle中的大小不同。此外，背景颜色不再像之前的fiddle一样是白色的。我是否可以解决这些问题，因为我已经注意到保存为PDF时方框的模糊度比以前的fiddle更清晰？ - Dave

当调整JSFiddle窗口大小时，段落标签的PDF大小会发生变化，不再是原始大小。是否有可能解决这些问题？ - Dave

我已经尝试稍微更改了CSS，更新了答案。 - Siddharth