How to Download Input Text from user as PDF using HTML/Javascript

Question

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.

Answer 1

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