search

Aymkdn / html-to-pdfmake

This module permits to convert HTML to the PDFMake format
https://aymkdn.github.io/html-to-pdfmake/index.html
MIT License
560 stars 88 forks source link

Bug: Newlines get inserted after images where they actually shouldn't be #212

Closed i-terzic closed 6 months ago

i-terzic commented 6 months ago

Hi,

Thanks for writing this library! I'm having an issue where newlines are inserted after <img>-tags (actually icons) where they actually shouldn't be.

The raw html should produce an output like this: 

    <div
        <p dir="auto"><img alt="Check" height="16" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAHYcAAB2HAY/l8WUAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuOWwzfk4AAAD3SURBVDhPY/j//z8KXnhh9f+kDUX/RTp1UDBIDCSHrh7OeP/943/nhWEYGtExSA1ILYoBIAGViVZYNWDDILUwQ8AGEGMzOgbpARsA8hc2BehYeYIlGCOLgfQyBK9IQRHEhh3mh/y//urW/7p9PSjiIL0MyAIgjG4LSPOXn19Bzv1/791DFDkQxjCg+eCE/8svbwCzc7ZWgzWCwKUX11DUwTCGAd9+fwdrABkCA4svrkVRg4wxDAApRgbVeztR5NEx1kBM2Vjy/8P3T2AaXQ4ZgwOR2GjEhsHRCHQlZQkJRFCclGGGEOMSkBqYZhQDYBjkL+Kz838GAOugPshtMe5KAAAAAElFTkSuQmCC"
                width="16"><b>&nbsp;Test User</b></p>
        <p dir="auto"><i><u><img alt="Error" height="16" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAHYcAAB2HAY/l8WUAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuOWwzfk4AAACSSURBVDhPY/jz+dPdspwLLuYEEVAZUDEDkaohCKiYAU2IIKJMw+UAl6fT+oEknPt25xY4F4JQNABV/////9vdW0BFQARkALlAQWQ16E4CGgnRA1EN5KIpwOIHiB6sqoEIXQPcJURpgKsGKiXKSRDHQBQR5WmgokddTchcoGYgCRcBIiyexo9I10By4iMteX/+BABi54UE7mI0lwAAAABJRU5ErkJggg==" style="font-size:10.5pt; letter-spacing:0px" width="16"><span style="font-size:10.5pt; letter-spacing:0px">&nbsp;Test User</span></u></i></p>

        <p dir="auto"><span style="font-size:10.5pt; letter-spacing:0px"><img alt="Forbidden" height="16" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAHYcAAB2HAY/l8WUAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuOWwzfk4AAAA6SURBVDhPY/jz+dPdspwLLuYEEVAZUDEDkaohCKiYAU2IIBp2Gv7jAMhqKNNADBoWGkhOfKQl78+fAFTQcCgswFe/AAAAAElFTkSuQmCC" width="16"> Test&nbsp;</span></p>
    </div>

image

But when downloading the pdf newlines get inserted after the images.

Example: 

<!doctype html>
<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>
</head>
<body>

  <script>
    const html = "<div\r\n        <p dir=\"auto\"><img alt=\"Check\" height=\"16\" src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAHYcAAB2HAY/l8WUAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuOWwzfk4AAAD3SURBVDhPY/j//z8KXnhh9f+kDUX/RTp1UDBIDCSHrh7OeP/943/nhWEYGtExSA1ILYoBIAGViVZYNWDDILUwQ8AGEGMzOgbpARsA8hc2BehYeYIlGCOLgfQyBK9IQRHEhh3mh/y//urW/7p9PSjiIL0MyAIgjG4LSPOXn19Bzv1/791DFDkQxjCg+eCE/8svbwCzc7ZWgzWCwKUX11DUwTCGAd9+fwdrABkCA4svrkVRg4wxDAApRgbVeztR5NEx1kBM2Vjy/8P3T2AaXQ4ZgwOR2GjEhsHRCHQlZQkJRFCclGGGEOMSkBqYZhQDYBjkL+Kz838GAOugPshtMe5KAAAAAElFTkSuQmCC\"\r\n                width=\"16\"><b>&nbsp;Test User</b></p>\r\n        <p dir=\"auto\"><i><u><img alt=\"Error\" height=\"16\" src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAHYcAAB2HAY/l8WUAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuOWwzfk4AAACSSURBVDhPY/jz+dPdspwLLuYEEVAZUDEDkaohCKiYAU2IIKJMw+UAl6fT+oEknPt25xY4F4JQNABV/////9vdW0BFQARkALlAQWQ16E4CGgnRA1EN5KIpwOIHiB6sqoEIXQPcJURpgKsGKiXKSRDHQBQR5WmgokddTchcoGYgCRcBIiyexo9I10By4iMteX/+BABi54UE7mI0lwAAAABJRU5ErkJggg==\" style=\"font-size:10.5pt; letter-spacing:0px\" width=\"16\"><span style=\"font-size:10.5pt; letter-spacing:0px\">&nbsp;Test User</span></u></i></p>\r\n\r\n        <p dir=\"auto\"><span style=\"font-size:10.5pt; letter-spacing:0px\"><img alt=\"Forbidden\" height=\"16\" src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAHYcAAB2HAY/l8WUAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuOWwzfk4AAAA6SURBVDhPY/jz+dPdspwLLuYEEVAZUDEDkaohCKiYAU2IIBp2Gv7jAMhqKNNADBoWGkhOfKQl78+fAFTQcCgswFe/AAAAAElFTkSuQmCC\" width=\"16\"> Test&nbsp;</span></p>\r\n    </div>\r\n"
    var val = htmlToPdfmake(html);
    var dd = {content:val};
    pdfMake.createPdf(dd).download();
  </script>
</body>
</html>

file.4 (1).pdf

Thanks a lot :)

Aymkdn commented 6 months ago

It's a limitation of PDFMake. I've checked again, but nothing new (e.g. I tried what they say in this issue, but it doesn't seem to work).

Some people provide workarounds but they are difficult to apply for my library. You're best option is probably to use a <table>…