3

Estoy realizando una transformación de mi HTML a PDF, pero tengo un problema al hacer el salto de página, el div se me corta al saltar de una página a otra, tal y como se aprecia en la imagen

introducir la descripción de la imagen aquí

El código que actualmente estoy utilizando para convetirlo a PDF es el siguiente.

 generarPDF1() {
    var data = document.getElementById('paraPDF');
    html2canvas(data).then(canvas => {
      var imgWidth = 200;
      var pageHeight = 190;
      var imgHeight = canvas.height * imgWidth / canvas.width;
      var heightLeft = imgHeight;
      const contentDataURL = canvas.toDataURL('image/png', 10)
      var options = {
      size: '70px',
      background: '#fff',
      pagesplit: true,
    };
    let pdf = new jsPDF('p', 'mm', 'a4', 1); // A4 size page of PDF
    var position = 0;
    var width = pdf.internal.pageSize.width;
    var height = pdf.internal.pageSize.height;
    pdf.addImage(contentDataURL, 'PNG', 2, position, imgWidth, imgHeight, options)
    pdf.addImage(contentDataURL, 'PNG', 2, position, imgWidth, imgHeight, options);
    heightLeft -= pageHeight;
    while (heightLeft >= 0) {
      position = heightLeft - imgHeight;
      pdf.addPage();
      pdf.addImage(contentDataURL, 'PNG', 2, position, imgWidth, imgHeight, options);
      heightLeft -= pageHeight;
    }
    pdf.save('informe.pdf'); // Generated PDF
    });
  }

<div style="height: 0px; overflow-x: scroll;">
    <div id="paraPDF">
        <div class="row impresion">
            <div class="col-md-12 contenedor-card mb-4" *ngFor="let fcita of citas | filter:filterHora:filterOtros:filterTerapeuta:filterPacientes:filterFecha">
                <div class="header-impresion">
                    {{fcita.historia}} - {{fcita.nombre_paciente}} {{fcita.apellidos_paciente}}
                </div>
                <div class="informacion-impresion">
                    <ul>
                        <li><b>Fecha:</b> {{fcita.fecha}}</li>
                        <li><b>Hora:</b> {{fcita.hora}}</li>
                        <li><b>Estado:</b> {{fcita.estado}}</li>
                        <li><b>Información adicional:</b> {{fcita.otros}}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

3
  • coloca tu CSS y parte del HTML para reproducir tu escenario
    – fredyfx
    Commented el 5 mar. 2020 a las 21:20
  • @fredyfx agregué el html, el css lo e omitido por que básicamente es bootstrap :/ Commented el 6 mar. 2020 a las 10:23
  • No te vale la solución dada?
    – John
    Commented el 15 mar. 2020 a las 3:33

1 respuesta 1

-1

Antes de nada, comentarte que propio jsPDF incorpora la función addHTML() para convertir HTML a PDF, y quizás puede interesarte.

El problema que tienes en tu código, es que generas una imagen de todo el div#paraPDF, entonces a la ora de dibujarlo en el PDF, no hay manera de saber en que punto se puede saltar de pagina sin cortar un elemento. Para poder controlar en que punto se debería saltar sin cortar un elemento, se tiene dibujar uno a uno los elementos.

Puesto que html2canvas() realiza la conversión de forma asíncrona, hemos de esperar a que genere el canvas correspondiente antes de agregarlo al PDF.

Ejemplo en jsfiddle donde se genera el canvas de los elementos por separado, mediante la llamada de la función asíncrona generarPDF().

JS de la nueva función:

async function generarPDF() {
  let elements = document.querySelectorAll("#paraPDF .impresion");
  let pdf = jsPDF('p', 'pt','a4', 1);
  var options = {
    background: '#fff',
  };
  var pageHeight = pdf.internal.pageSize.height; // Tamaño de una pagina
  var pageHeightLeft = pageHeight; // La utilizaremos para ver cuanto espacio nos queda
  position = 0;

  for(let i = 0; i < elements.length; i++) {
    await html2canvas(elements[i]).then(function(canvas) {
      // Comprobamos salto
      if (pageHeightLeft - canvas.height <= 0) {
        pdf.addPage();
        position = 0; // Pintaremos en el inicio de la nueva pagina
      }
      pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, position, canvas.width, canvas.height, options);
      position += canvas.height; // Marcamos el siguiente inicio
      pageHeightLeft -= canvas.height; // Marcamos cuanto espacio nos queda
    });
  }

  pdf.save("informe.pdf");
}

Tras buscar mucha información al respecto, veo que el problema que tienes esta muy extendido, y no e encontrado otra solución factible a tu problema. Espero que te sirva.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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