cari

Rumah  >  Soal Jawab  >  teks badan

Wkhtmltopdf: Penukaran jadual HTML menyebabkan baris tidak sejajar

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粉064448449P粉064448449279 hari yang lalu518

membalas semua(1)saya akan balas

  • P粉614840363

    P粉6148403632024-03-31 11:06:56

    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:

    balas
    0
  • Batalbalas