简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Wkhtmltopdf: HTML table conversion causes misaligned rows
P粉064448449
P粉064448449 2024-03-30 12:55:53
0
1
412

Use wkhtmltopdf to convert html table report: 

<!DOCTYPE html>
<html lang="en"></html>
<head>
  <style type="text/css">
    @font-face {
      font-family: Plex;
      src: url(/home/shawn/Development/Websites/MDSova/restapi/templates/fonts/IBMPlexSans-Regular.ttf);
    }

    @font-face {
      font-family: Plex-Bold;
      src: url(/home/shawn/Development/Websites/MDSova/restapi/templates/fonts/IBMPlexSans-SemiBold.ttf);
    }

    body {
      font-family: Plex, Arial, Helvetica, sans-serif;
      background-color: #FFF;
      font-size: 18px;
    }

    h1,
    h2,
    h3 {
      margin: 0;
      padding: 0;
    }

    .report-data-table,
    .report-title-table {
      width: 100%;
      border-collapse: collapse;
    }

    .report-title-table {
      line-height: 36px;
    }

    .report-title-left,
    .title-right {
      width: 15%;
    }

    .report-title-center {
      width: 70%;
      text-align: center;
    }

    .report-title-right {
      text-align: right;
    }

    .report-date-header,
    .report-date-col {
      width: 10%;
      background-color: chocolate;
    }

    .report-for-header,
    .report-for-col {
      width: 14%;
      background-color: palegreen
    }

    .test {
      width: 78%;
      background-color: forestgreen;
    }

    .report-date-header,
    .report-for-header,
    .report-source-header,
    .report-sourcename-header,
    .report-account-header,
    .report-method-header,
    .report-reference-header,
    .report-amount-header {
      font-family: Plex-Bold;
      border-bottom: 1px solid #333;
    }
  </style>
</head>
<body>
  <table class="report-title-table">
    <tr>
      <td class="report-title-left">01/15/2023</td>
      <td class="report-title-center">
        <h1>Payment Ledger</h1>
      </td>
      <td class="report-title-right">11:23AM</td>
    </tr>
  </table>
  <table class="report-data-table">
    <tr>
      <td class="report-date-header">Payment Date</td>
      <td class="report-for-header">Payment For</td>
      <td class="test"></td>
    </tr>
    <tr class="column-row">
      <td class="report-date-col">01/23/2023</td>
      <td class="report-for-col">PAYMENT ON ACCOUNT</td>
      <td class="test"></td>
    </tr>
    <tr class="column-row">
      <td class="report-date-col">01/23/2023</td>
      <td class="report-for-col">PAYMENT ON ACCOUNT</td>
      <td class="test"></td>
    </tr>
    <tr class="column-row">
      <td class="report-date-col">01/23/2023</td>
      <td class="report-for-col">PAYMENT ON ACCOUNT</td>
      <td class="test"></td>
    </tr>
    <tr class="column-row">
      <td class="report-date-col">01/23/2023</td>
      <td class="report-for-col">PAYMENT ON ACCOUNT</td>
      <td class="test"></td>
    </tr>
    <tr class="column-row">
      <td class="report-date-col">01/23/2023</td>
      <td class="report-for-col">PAYMENT ON ACCOUNT</td>
      <td class="test"></td>
    </tr>
    <tr class="column-row">
      <td class="report-date-col">01/23/2023</td>
      <td class="report-for-col">PAYMENT ON ACCOUNT</td>
      <td class="test"></td>
    </tr>
    <tr class="column-row">
      <td class="report-date-col">01/23/2023</td>
      <td class="report-for-col">PAYMENT ON ACCOUNT</td>
      <td class="test"></td>
    </tr>
    <tr class="column-row">
      <td class="report-date-col">01/23/2023</td>
      <td class="report-for-col">PAYMENT ON ACCOUNT</td>
      <td class="test"></td>
    </tr>
    <tr class="column-row">
      <td class="report-date-col">01/23/2023</td>
      <td class="report-for-col">PAYMENT ON ACCOUNT</td>
      <td class="test"></td>
    </tr>
    <tr class="column-row">
      <td class="report-date-col">01/23/2023</td>
      <td class="report-for-col">PAYMENT ON ACCOUNT</td>
      <td class="test"></td>
    </tr>
    <tr class="column-row">
      <td class="report-date-col">01/23/2023</td>
      <td class="report-for-col">PAYMENT ON ACCOUNT</td>
      <td class="test"></td>
    </tr>
    <tr class="column-row">
      <td class="report-date-col">01/23/2023</td>
      <td class="report-for-col">PAYMENT ON ACCOUNT</td>
      <td class="test"></td>
    </tr>
    <tr class="column-row">
      <td class="report-date-col">01/23/2023</td>
      <td class="report-for-col">PAYMENT ON ACCOUNT</td>
      <td class="test"></td>
    </tr>
    <tr class="column-row">
      <td class="report-date-col">01/23/2023</td>
      <td class="report-for-col">PAYMENT ON ACCOUNT</td>
      <td class="test"></td>
    </tr>
    <tr class="column-row">
      <td class="report-date-col">01/23/2023</td>
      <td class="report-for-col">PAYMENT ON ACCOUNT</td>
      <td class="test"></td>
    </tr>
  </table>
</body>

I know there's a lot of code here, but there are a few lines that are misaligned. It's not just on one line either - it's random. When the html is put into the browser it displays fine, but it doesn't convert to a print version. What can I do to correct this problem? Thanks

P粉064448449
P粉064448449

reply all(1)
P粉614840363
P粉6148403632024-03-31 11:06:56 1 floor

After adding more lines, I was able to reproduce the issue, which shows that the issue is indeed quite unpredictable.

However, the problem seems to be caused by the border-collapse:collapse; css property. Removing it makes all rows the same height.

Of course, this will also result in a white border around each table cell, which may be undesirable.

To make the border blend in with the cell, the solution is to color the column using the background pattern of the entire table (rather than the background-color property of the individual cell).

In the code below, I create an inline svg image consisting of three rectangles with table column widths and colors:

In order for column widths to be calculated correctly during conversion, I need to adjust the dpi setting to 130: 

wkhtmltopdf --dpi 130 input.html output.pdf

HTML code:
01/15/2023

Payment Ledger

 11:23AM
Payment Date Payment For
01/23/2023 PAYMENT ON ACCOUNT
01/23/2023 PAYMENT ON ACCOUNT

Generated pdf file:

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！