line-height issue - Githubissues

codeservice commented 7 months ago

Something wrong with line-height calculation:


<html lang='en'>
<head>
  <meta charset='utf-8'>
  <title>my example</title>
  <!-- pdfmake files: -->
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/pdfmake.min.js'></script>
  <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/vfs_fonts.min.js'></script>
  <!-- html-to-pdfmake file: -->
  <script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js"></script>
  <!--script src="index.js"></script-->

  <script>
                      function exportToPdf() {
    txt = document.getElementById("element-to-print").innerHTML;

var ret = htmlToPdfmake(txt, {
  ignoreStyles:['font-family','line-height'],
  removeExtraBlanks:true,
  imagesByReference:true
});

var dd = {
  content:ret.content,
  images:ret.images,

footer: function(currentPage, pageCount) { return currentPage.toString() + ' of ' + pageCount; },
  header: function(currentPage, pageCount, pageSize) {

    return [
      { text: 'simple text', alignment: (currentPage % 2) ? 'left' : 'right' },
      { canvas: [ { type: 'rect', x: 170, y: 32, w: pageSize.width - 170, h: 40 } ] }
    ]
  }
}
pdfMake.createPdf(dd).download();

}
  </script>

</head>
<body onload="">

<button onclick="exportToPdf()">Export</button>

<div id='element-to-print'>
<span style="color: #2d2d2d;">
<p style="font-family: arial; font-weight: bold;"><span style="line-height: 17.12px; font-family: arial; font-size: 16px;"><strong style="font-size: 19.2px;">0</strong>
</span></p>
<ul>
    <li><span style="font-family: arial;">1</span></li>
    <li><span style="font-family: arial;">2</span></li>
    <li><span style="font-family: arial;">3</span></li>
</ul>
<strong style="font-family: arial;">0</strong></span><br />
<span style="font-size: 14pt; line-height: 107%;"><span style="font-family: arial;">
</span>
<ul>
    <li><span style="font-family: arial; font-size: 16px;">1</span></li>
</ul>
</span>
</div>

</body>
</html>.```

Aymkdn commented 7 months ago

line-height in PDFMake doesn't work like in HTML/CSS. I'd recommand to use a number value only instead of a number + "px/%" (e.g. line-height:1.2), and to do some test in the PDFMake playground to find which value would work best with your expectation. In your case, the use of line-height is weird, and maybe a padding/margin would be good enough?!

Also your HTML code is messy and has too many layers of unnecessary tags, that may cause an unexpected result. The translation of the HTML to PDFMake is very complex, and this tool is only here for simple code and quick page layout.

Try to simplify your HTML code. For example:

<div id='element-to-print'>
  <div style="color: #2d2d2d;font-weight:bold;margin-top:5px;font-size:19.2px;">First sentence</div>
  <ul>
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
  </ul>
  <div style="color: #2d2d2d;font-weight:bold;margin-top:15px;font-size:19.2px;">Second sentence</div>
  <ul>
    <li>Option 4</li>
  </ul>
</div>

And finally, be aware that <p> adds by default a margin which could also impact the result.

codeservice commented 7 months ago

Also your HTML code is messy and has too many layers of unnecessary tags,

Yes, this code generated by html WYSIWYG editor. Whoever using it doesn't understand html code well, but this code valid. I can't really tell them how to modify html for export optimization. Only solution for now is to disable line-height.

Aymkdn commented 7 months ago

Yes, I think it's better to remove line-height in your case :-)

Aymkdn / html-to-pdfmake

line-height issue #205