Using jsPDF, are there ready templates?

2

I'm using jsPDF to make a report from some user input data, however I'm having a lot of trouble getting the report pretty further due to the fact that I do not know how to customize much with the jsPDF . So there are templates ready for this tool?

Furthermore it has support for generating charts and putting in the report (PDF)?

jsPDF

Documentation

Below I left as is my code at the moment:

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');
    
asked by anonymous 27.04.2016 / 20:05

1 answer

1

As far as I know, there are no proactive templates, because it's not complicated to create, to create PDF from HTML (the resolution usually goes bad). In case of tables, you can use Autotable , here is 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 (keep in mind), post your current code and the layout you want to achieve that we help.

    
29.08.2017 / 17:16