Simplest way to generate a PDF of an HTML, client-side input

Asked

Viewed 10,715 times

7

I am developing a didactic material in web language, and within it, there are some exercises where the user has to answer some questions, writing a brief dissertation within a Text Area.

After finishing the exercise, I would like a PDF to be generated with this text he wrote, so that he can download it on his computer. As you can see, the solution may be client-side.

It doesn’t need to be generated from scratch. In this case, I can develop a PDF template, already with style, fonts, colors, tags etc. and a field, which will be filled by this user input.

I ask this question because the procedure is really quite simple, it is not a complete form, the PDF will not have multiple pages, Javascript will not necessarily need to style the PDF...

However, I can’t find simple solutions, jsPDF seemed a little complicated for my request...

  • Why do you find jsPDF a little complicated?

2 answers

4

Apart from the jsPDF project, there is nothing else out there that serves your requirement to generate Pdfs on the client side.

I don’t know why you find jsPDF complicated, after all, starting and finishing a document is quite simple when compared to more advanced tools server-side:

var doc = new jsPDF();                         // novo documento

doc.text("Bastante simples o jsPDF!", 35, 25); // algum texto

doc.save('verifica.pdf');                      // download
  • I was showing repulsion to jsPDF pq I was having a lot of problems with it, and I was having a very short time... But you’re right, it’s very simple. Unfortunately he works in a very linear way... But he’s great. Thank you!

  • If you’ve used another way to deal with your problem, take it as an answer to help future readers with the same problem :)

2

The simplest I’ve ever used was supposedly jsPDF!.

I think jsPDF fits perfectly into what you need

Look how simple you can generate a PDF with so little code:

//Tão simples
var doc = new jsPDF();
// definir o tamanho da fonte...
doc.setFontSize(22);
// Adicionar texto
doc.text(20, 20, 'Meu PDF');
// adicionar outra pagina
doc.addPage();
// selecionar outro tamanho de fonte
doc.setFontSize(16);
// adicionar texto
doc.text(20, 30, 'Olá eu sou um texto!');

Browser other questions tagged

You are not signed in. Login or sign up in order to post.