简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Wkhtmltopdf: Die HTML-Tabellenkonvertierung führt zu falsch ausgerichteten Zeilen
P粉064448449
P粉064448449 2024-03-30 12:55:53
0
1
408

Verwenden Sie wkhtmltopdf, um den HTML-Tabellenbericht zu konvertieren: 

<!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>

Ich weiß, dass es hier viel Code gibt, aber es gibt ein paar Zeilen, die falsch ausgerichtet sind. Es steht auch nicht nur in einer Zeile, es ist zufällig. Wenn der HTML-Code in den Browser eingegeben wird, wird er einwandfrei angezeigt, aber nicht in eine Druckversion konvertiert. Was kann ich tun, um dieses Problem zu beheben? Danke

P粉064448449
P粉064448449

Antworte allen(1)
P粉614840363
P粉6148403632024-03-31 11:06:56 1 Etage

添加更多行后，我可以重现该问题，这表明该问题确实相当难以预测。

但是，该问题似乎是由 border-collapse:collapse; css 属性引起的。删除它会使所有行具有相同的高度。

当然，这也会导致每个表格单元格周围出现白色边框，这可能是不希望的。

要使边框与单元格融为一体，解决方案是使用整个表格的背景图案（而不是单个单元格的 background-color 属性）为列着色。

在下面的代码中，我创建了一个内联 svg 图像，该图像由三个具有表格列宽度和颜色的矩形组成：

为了在转换过程中正确计算列宽，我需要将 dpi 设置调整为 130：

wkhtmltopdf --dpi 130 input.html output.pdf

HTML 代码：
01/15/2023

Payment Ledger

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

生成的 pdf 文件：

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！