Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

315
Visualizações
Weird text rendering with jsPDF from HTML

I'm trying to convert a piece of HTML to PDF, I can't show all the PDF here, but this is an example of my issue

enter image description here

the above image converts a simple

<p style="border: 1px solid red">qualquerrererrererer</p>

to PDF

The text is being rendered below the line height, even with no css styling the element

I'm developing with nextJS, react and typescript, this is the piece of code that convert the HTML to 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
        });
    }

Anyone have ever had the same issue? I've searched a lot, but didn't find anyone with the same problem.

I already tryied to set, line-height on css, vertical-align, remove margins, paddings, tryied to change the jsPDF properties from unit px to pt, setting different sizes on format, setting format to a4, nothing seens to work, event setting the line-height higher, sets the text inside the box, but still have a huge gap above it

My temporary solution

I had wrap every text with a span with position: relative; top: -/*half of the size of the font*/

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda