是否可以使用 JSPDF 将包含边框的段落 <p>
保存为 PDF,合并格式并将元素保持在页面中央?
以下代码允许在将文本粘贴到 textarea
时生成段落。如 Fiddle 中所示,似乎可以将表格另存为 PDF。
但是,下面的动态段落和边框是否可以动态保存为PDF?
如果可以提供更新的 fiddle ,我将不胜感激,因为我对编码还是个新手。
谢谢!
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}
最佳答案
我已经编辑了你的代码。请see your sample here (edited)
我用过:
background-color: white;
在“text_land”上
编辑:
我检查了 html2canvas.js它解析 html 元素树并根据它们的样式进行绘制。
最顶层 html 元素的宽度 - 渲染树的“text_land”被认为是结果图像的宽度。页面缩放后超出“text_land”div 的所有内容均未呈现。
想法是要有不同的打印样式。
关于javascript - 将段落动态保存为 PDF?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34398906/