Using jsPDF, are there any templates ready?

Asked

Viewed 1,507 times

2

I’m using the jsPDF to make a report from some user input data, however I am having many difficulties to make the report beautiful even more due to the fact that I do not know how to customize much with the jsPDF. So there are templates ready for that tool?

In addition it has support to generate graphics and put in the report (PDF)?

jsPDF

Documentation

Below I left as this my code at this time:

var doc = new jsPDF();
doc.setFontSize(22);
doc.text(40, 20, 'Relatorio - Departamento de Projetos');

doc.setFontSize(18);
doc.text(20, 40, 'Mes Anterior');

doc.setFontSize(12);
doc.text(20, 50, 'Data Inicio: ' + dtInicio1);
doc.text(100, 50, 'Data Fechamento: ' + dtFechamento1);
doc.text(20, 60, 'Projetos em Desenvolvimento: ' + pDesen1);
doc.text(20, 70, 'Projetos em Analise: ' + pAnalise1);
doc.text(20, 80, 'Projetos Cancelados: ' + pCancel1);

doc.setFontSize(18);
doc.text(20, 120, 'Mes Atual');

doc.setFontSize(12);
doc.text(20, 130, 'Data Inicio: ' + dtInicio2);
doc.text(100, 130, 'Data Fechamento: ' + dtFechamento2);
doc.text(20, 140, 'Projetos em Desenvolvimento: ' + pDesen2);
doc.text(20, 150, 'Projetos em Analise: ' + pAnalise2);
doc.text(20, 160, 'Projetos Cancelados: ' + pCancel2);

doc.save('Relatorio-DP.pdf');
javascript pdf template pdf-generation jspdf

  • Welcome. I think the question would be even more interesting if you create a Snippet and post the Jspdf documentation link.

  • Well I’ll put the link to the documentation, but what would be a Snippet?

  • Not officially, but since it accepts images and a bit of HTML then it might be better to look for specific libraries like Fabric.js or Raphal.js and take the generated Graphics to export to image and add to your PDF.

  • Vlw by tip, but in the case of templates or pdf templates there is some ready to use?

1 answer

1

As far as I know, there are no proto templates, because it is not complicated to create, da para criar PDF a partir de um HTML (the resolution in general gets bad). In case of tables, Voce can use the Autotable, then follows a basic example of formatting.

this.getDataUri('static/images/logo.gif', function(dataUri) {
          image = dataUri
      });

let doc = jsPDF('p', 'pt', 'a4')
            doc.setFont('Courier')
            // Titulo
            doc.setFontSize(20)
            doc.text('TEXTO', 215, 60)
            doc.line(40, 80, 550, 80)
            if(!this.data.Flag){
                doc.setFontSize(12)
                doc.text('Preview', 290, 75)
                doc.setFontSize(20)
            }

            // Logo
            doc.addImage(image, 30, 30)

            // Informação Cabeçalho
            doc.setFontSize(10)
            doc.text('TEXTO:', 50, 120)
            doc.text('TEXTO:', 50, 140)
            doc.text('TEXTO:', 50, 160)
            doc.text('Date:', 50, 180)
            doc.text('TEXTO:', 50, 200)
            doc.text('TEXTO:', 50, 280)

doc.save(this.data.title[0].title+'.pdf')

Remembering that this is a very basic example, if you have difficulty with a specific layout (that you have in mind), post your current code and the layout you want to achieve that we help.

Browser other questions tagged javascript pdf template pdf-generation jspdf

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