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
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
I had wrap every text with a span with position: relative; top: -/*half of the size of the font*/