0

Tengo un problema y es que al agregar gráficas a mi pdf las gráficas me aparecen bien pero quiero poner una cabecera al pdf o un texto en la parte superior y ese texto se ver deformado y borroso, estoy usando jspdf en Angular y ChartsJS para los gráficos os dejo mi código y una captura de como se ve el pdf.

Aquí es donde comienza nuestra función al hacer click en el botón de exportar PDF

exportarInforme() {
    this.snackbar.open("Cargando informe...");
    let resumeDOM = document.getElementById("informeDesc");
    //let pdf = new jspdf();
    //pdf.setFontSize(22);
    //pdf.text(20, 20, 'This is a title');

    html2canvas(resumeDOM).then(canvas => {
      let pdf = new jspdf('p', 'px', 'a4');
      let offset = 20 + (10 * this.descriptions.length);
      let marginBottom = 20;
      pdf.addImage(canvas, 10, 10, 425, offset);

      this.generatePDF(pdf, offset + marginBottom);
    });
  }



generatePDF(pdf, offset) {
    let contentsPDF = new Array();
    var questionsDOM = document.getElementsByClassName("questionGraph");
    for (let index = 0; index < questionsDOM.length; index++) {
      const graph = questionsDOM[index];
      html2canvas(graph).then(canvas => {
        contentsPDF.push(canvas.toDataURL('image/png'));

        if(contentsPDF.length == questionsDOM.length) {
          this.addChartsToPdf(contentsPDF, pdf, offset);
        }

      });
    }
  }




addChartsToPdf(contentsPDF, pdf, initialOffset) {
    //PDF vars
    //Dates
    var desdeFechaValue = this.formGroupInforme.value["desdeCtrl"];
    var desdeFecha = desdeFechaValue.getFullYear() + "/" + (desdeFechaValue.getMonth() + 1).toString().padStart(2, "0");
    var hastaFechaValue = this.formGroupInforme.value["hastaCtrl"];
    var hastaFecha = hastaFechaValue.getFullYear() + "/" + (hastaFechaValue.getMonth() + 1).toString().padStart(2, "0");

    //Name
    var nombre = "informe_" + this.otsActivas.join("_") + "_" + desdeFecha + "_" + hastaFecha +".pdf";

    //Dimensions
    var questionHeight = 70; //80
    let maxGraphsPerPage = 6;
    let margin = 10;
    let bottomMargin = 30;
    let imgWidth = 425;
    var offsetHeight = 0 + margin + initialOffset;

    //Generacion pdf
    contentsPDF.forEach(content => {
      if(offsetHeight - (questionHeight + bottomMargin) > questionHeight * maxGraphsPerPage)
      {
        pdf.addPage("a4", "p");
        offsetHeight = 0;
      }

      pdf.addImage(content, "PNG", margin, margin + offsetHeight, imgWidth, questionHeight);

      offsetHeight += questionHeight + bottomMargin;
    });

    //Saving
    pdf.save(nombre);
    this.snackbar.dismiss();
  }

Aquí les dejo una captura de como se vería el PDF introducir la descripción de la imagen aquí

Prueba titulo es simplemente un dentro de un div

1
  • 3
    Faltan datos: No tenemos el HTML que trasformas a imagen para generar luego el PDF. Tendrías que haer esto en varios pasos y comprobar que lo que tienes es correcto: el HTML, la imagen generada y el PDF generado. Lo mismo el texto se deforma al pasarse a imagen y el problema no está en la generación del PDF el 18 jul. 2019 a las 9:22

2 respuestas 2

-1

Te recomendaría capturar el dato del título mediante el uso del DOM. Algo así:

const tituloDiv = document.querySelector('#id').innerHTML

Luego lo agregas a tu JSPDF como texto,

doc.text(tituloDiv,posX,posY)

En caso desees poner de un tamaño más grande el título, puedes ver la documentación aquí:

-2

Aquí te dejo un artículo sobre generación de PDF con JavaScript. Quizás te pueda servir de algo.

Javascript : Convert HTML + CSS to PDF. Print HTML in Seconds - itnext.io

Aquí te dejo un ejemplo de código que me ha servido a mí para generar PDF con JavaScript:

html2canvas(document.querySelector('html'), {scale: 1}).then(canvas => {
    const orientation = screen.msOrientation || screen.mozOrientation || (screen.orientation || {}).type;
    let pdf;
    if( orientation.indexOf('portrait') >= 0) {
        pdf = new jsPDF('p', 'pt', [canvas.width,canvas.height]);
    }else {
        pdf = new jsPDF('l', 'pt', [canvas.width,canvas.height]);
    }
    pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, canvas.width,canvas.height);
    pdf.save(); //-> download pdf file
});
0

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.