Estoy tratando de convertir una parte de HTML a PDF, no puedo mostrar todo el PDF aquí, pero este es un ejemplo de mi problema
la imagen de arriba convierte un simple
<p style="border: 1px solid red">qualquerrererrererer</p>a PDF
El texto se representa por debajo de la altura de la línea, incluso sin estilo CSS del elemento.
Estoy desarrollando con nextJS, react y typescript, este es el código que convierte el HTML a PDF
function print () { const input = document.getElementById('divToPrint'); // eslint-disable-next-line new-cap const pdf = new jsPDF({ orientation: 'portrait', unit: 'px', format: [input.getBoundingClientRect().width, input.getBoundingClientRect().height] }); pdf.html(input, { callback: () => { pdf.deletePage(2); pdf.save('test.pdf'); }, x: 0, y: 0, width: input.getBoundingClientRect().width }); }¿Alguien ha tenido el mismo problema? He buscado mucho, pero no encontré a nadie con el mismo problema.
Ya intenté configurar, line-height en css, vertical-align , eliminar márgenes, rellenos, intenté cambiar las propiedades de jsPDF de la unit px a pt , configurar diferentes tamaños en el formato, configurar el formato en a4 , nada funciona, evento establecer la line-height más alta, establece el texto dentro del cuadro, pero todavía tiene un gran espacio por encima de él
Había envuelto cada texto con un span con position: relative; top: -/*half of the size of the font*/