javascript – 动态地将段落保存为PDF？

是否可以使用JSPDF来保存段落< p>包括边框作为PDF,结合格式并将元素保持在页面的中心？ @H_502_2@以下代码允许在将文本粘贴到textarea时生成段落.正如在Fiddle中所示,似乎可以将表保存为PDF.

@H_502_2@但是,是否可以动态地将以下动态段落和边框保存为PDF？

@H_502_2@如果可以提供更新的小提琴,我将非常感激,因为我还不熟悉编码.

@H_502_2@谢谢！

@H_502_2@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>

@H_502_2@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;

@H_502_2@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}

解决方法

我已经编辑了你的代码.请 see your sample here (edited) @H_502_2@我用过：

background-color: white;

@H_502_2@在“text_land”

@H_502_2@编辑：

@H_502_2@我检查了html2canvas.js它解析了html元素树并根据它们的风格绘制.

@H_502_2@最顶层html元素的宽度 – 渲染树的“text_land”被视为结果图像的宽度.在页面缩放后超出“text_land”div的所有内容都未呈现.

@H_502_2@我们的想法是拥有独立的打印样式.

javascript – 动态地将段落保存为PDF？

解决方法

猜你在找的JavaScript相关文章