recherche

Maison  >  Questions et réponses  >  le corps du texte

Wkhtmltopdf : la conversion de tableaux HTML provoque un mauvais alignement des lignes

Utilisez wkhtmltopdf pour convertir le rapport de tableau 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>

Je sais qu'il y a beaucoup de code ici, mais quelques lignes sont mal alignées. Ce n’est pas non plus sur une seule ligne – c’est aléatoire. Lorsque le code HTML est placé dans le navigateur, il s'affiche correctement, mais il n'est pas converti en version imprimée. Que puis-je faire pour corriger ce problème ? Merci

P粉064448449P粉064448449243 Il y a quelques jours476

répondre à tous(1)je répondrai

  • P粉614840363

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

    Je peux reproduire le problème après avoir ajouté plus de lignes, ce qui montre que le problème est en effet assez imprévisible.

    Cependant, le problème semble être causé par les propriétés border-collapse:collapse;css. En le supprimant, toutes les lignes ont la même hauteur.

    Bien sûr, cela entraînera également une bordure blanche autour de chaque cellule du tableau, ce qui peut être indésirable.

    Pour que les bordures se fondent dans les cellules, la solution est de colorer les colonnes en utilisant le motif de fond de l'ensemble du tableau (au lieu de l'attribut background-color des cellules individuelles).

    Dans le code ci-dessous, je crée une image svg en ligne composée de trois rectangles avec des largeurs et des couleurs de colonnes de tableau :

    Afin de calculer correctement les largeurs de colonnes lors de la conversion, je dois ajuster le paramètre dpi à 130 : 

    wkhtmltopdf --dpi 130 input.html output.pdf

    Code HTML : 

    


  


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

    Fichier pdf généré :

    répondre
    0
  • Annulerrépondre