Is it possible to use JSPDF to save paragraphs <p> that include borders as a PDF, incorporating the formatting and keeping the elements in the center of the page?

The following code allows paragraphs to be generated when text pasted into the textarea. As demonstrated within this Fiddle it seems that it is possible to save a table as a PDF.

---

However, is it possible to save the following dynamic paragraph and border as a PDF dynamically?

If an updated fiddle could be provided, it would be very much appreciated, as I am still new to coding.

JSFiddle

Thank You!

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}

Is it possible to use JSPDF to save paragraphs <p> that include borders as a PDF, incorporating the formatting and keeping the elements in the center of the page?

The following code allows paragraphs to be generated when text pasted into the textarea. As demonstrated within this Fiddle it seems that it is possible to save a table as a PDF.

---

However, is it possible to save the following dynamic paragraph and border as a PDF dynamically?

If an updated fiddle could be provided, it would be very much appreciated, as I am still new to coding.

JSFiddle

Thank You!

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}

• javascript
• jquery
• html
• css
• pdf

Share Improve this question Follow edited Dec 24, 2015 at 15:06 Dave asked Dec 21, 2015 at 15:15 DaveDave 78699 silver badges2727 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7 +50

I have edited your code. Please see your sample here (edited)

I have used:

 background-color: white;

on "text_land"

Edit:

I examined html2canvas.js It parses html element tree and draws according to their style.

Width of the top-most html element - "text_land" of the rendered tree was considered as a width of the resulting image. Everything, that went outside of the "text_land" div after page zoom, was not rendered.

The idea is to have separate styles for printing.

i did reworking on both of your fiddles and came up with something working, please to have a look at this fiddle

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

});

I have used html2canvas library.

Here's a link to fiddle!

---

UPDATED FIDDLE!

---

updated fiddle where resizing windows does not affect the oue