I want to take input from the user using the < input > tag and when the user clicks on download button, then then the input gets downloaded as pdf. How Can I implement it using HTML, CSS and Javascript on the client side.
2
-
1You can use jsPDF to generate PDF from your text.Ismail– Ismail2021-07-11 23:00:36 +00:00Commented Jul 11, 2021 at 23:00
-
I am facing some problems while using JS PDF. Like here: doc.text(10, 10, text.value); you took 10,10 so If I write Hello World it getting Printed in PDF fine but if user input is very large like lorem epsum .... then only some part(till it can adjust in one line) get printed on pdf rest gets overflow and not printed. I want them to be continued from next line if current line gets filled. What Changes do I need to make.Pranshu Kashyap– Pranshu Kashyap2021-07-12 16:53:13 +00:00Commented Jul 12, 2021 at 16:53
Add a comment
|
1 Answer
You can use the jsPDF library to generate PDFs.
You can add text via the text() method and save via the save() method.
To ensure the text wraps, we can use splitTextToSize to convert it to an array and pass it as a parameter to the text() method:
download.addEventListener('click', function() {
var doc = new jsPDF()
doc.text(10, 10, doc.splitTextToSize(text.value, 180));
doc.save('doc.pdf');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
<input id="text"><button id="download">Download as PDF</button>
Try it on JsFiddle
3 Comments
Pranshu Kashyap
I am facing some problems while using JS PDF. Like here: doc.text(10, 10, text.value); you took 10,10 so If I write Hello World it getting Printed in PDF fine but if user input is very large like lorem epsum .... then only some part(till it can adjust in one line) get printed on pdf rest gets overflow and not printed. I want them to be continued from next line if current line gets filled. What Changes do I need to make.
Spectric
@PranshuKashyap I've updated my answer and JsFiddle. It should work now.
Pranshu Kashyap
Yeah, the previous problem is solved, text is continuing from next line rather than overflowing. But Again the Problem is when text.value exceeds one page it trims the text and limits upto there. I wanted it to get continued from next page.