Wkhtmltopdf: Penukaran jadual HTML menyebabkan baris tidak sejajar
P粉064448449
P粉064448449 2024-03-30 12:55:53
0
1
469

Gunakan wkhtmltopdf untuk menukar laporan jadual html:

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

Saya tahu terdapat banyak kod di sini, tetapi terdapat beberapa baris yang tidak sejajar. Ia bukan hanya pada satu baris sama ada - ia secara rawak. Apabila html dimasukkan ke dalam penyemak imbas ia dipaparkan dengan baik, tetapi ia tidak ditukar kepada versi cetakan. Apakah yang boleh saya lakukan untuk membetulkan masalah ini? Terima kasih

P粉064448449
P粉064448449

membalas semua(1)
P粉614840363

Saya boleh mengeluarkan semula isu itu selepas menambah lebih banyak baris, yang menunjukkan bahawa isu itu sememangnya tidak dapat diramalkan.

Namun, isu itu nampaknya disebabkan oleh border-collapse:collapse; sifat css. Mengalih keluarnya menjadikan semua baris ketinggian yang sama.

Sudah tentu, ini juga akan menghasilkan sempadan putih di sekeliling setiap sel jadual, yang mungkin tidak diingini.

Untuk menjadikan sempadan sebati dengan sel, penyelesaiannya ialah mewarnakan lajur menggunakan corak latar belakang keseluruhan jadual (bukannya atribut background-color sel individu).

Dalam kod di bawah, saya mencipta imej svg sebaris yang terdiri daripada tiga segi empat tepat dengan lebar dan warna lajur jadual:


   
   
   

Untuk mengira lebar lajur dengan betul semasa penukaran, saya perlu melaraskan tetapan dpi kepada 130:

wkhtmltopdf --dpi 130 input.html output.pdf

Kod HTML:



  


  
01/15/2023

Payment Ledger

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

Fail pdf yang dihasilkan:

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan