Question

使用 iTextSharp 库将HTML生成为PDF。情景不同我们在这里只有一个tr，其中我们重复div的数量，但转换后它们会重叠。

分享一些有助于澄清的图像/代码。

＆＃13;

<html>

<head>
  <style>
    body {
      margin: 0;
    }
    
    table {
      width: 100%;
      border-spacing: 0;
      border-collapse: collapse;
      text-align: center;
    }
    
    thead.t1 {
      background: #dac8c8;
    }
    
    table td,
    table th {
      padding: 10px;
    }
    
    table {
      margin-top: 20px;
    }
    
    @media print {
      @page {
        size: A4 landscape;
      }
    }
    
    thead {
      display: table-header-group
    }
    
    table {
      -fs-table-paginate: paginate;
    }
    
    @media print {
      thead {
        display: table-header-group;
      }
    }
    
    .div-tr>div {
      width: 200px;
      display: table-cell;
      vertical-align: inherit;
      padding: 10px;
    }
    
    .div-tr {
      page-break-inside: avoid;
      display: table-row;
      vertical-align: inherit;
      border-color: inherit;
    }
  </style>

</head>

<body class="" style="width:1070px; margin:0 auto;">


  <div style="height:300px; width:100%; background:#ccc; border-bottom:2px solid #000;">
  </div>
  <table class="">
    <thead class="t1">
      <tr>
        <th> column1 </th>
        <th> column2 </th>
        <th> column3 </th>
        <th> column4 </th>
        <th> column5 </th>
        <th> column6 </th>
        <th> column7 </th>
        <th> column8 </th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td colspan="8" class="no-break">
          <div class=" ">
            <div class="div-tr">
              <div> column td1 </div>
              <div> column td2 </div>
              <div> column td3 </div>
              <div> column td4 </div>
              <div> column td5 </div>
            </div>
            <div class="div-tr">
              <div> column td1 </div>
              <div> column td2 </div>
              <div> column td3 </div>
              <div> column td4 </div>
              <div> column td5 </div>
            </div>
            <div class="div-tr">
              <div> column td1 </div>
              <div> column td2 </div>
              <div> column td3 </div>
              <div> column td4 </div>
              <div> column td5 </div>
            </div>
            <div class="div-tr">
              <div> column td1 </div>
              <div> column td2 </div>
              <div> column td3 </div>
              <div> column td4 </div>
              <div> column td5 </div>
            </div>
            <div class="div-tr">
              <div> column td1 </div>
              <div> column td2 </div>
              <div> column td3 </div>
              <div> column td4 </div>
              <div> column td5 </div>
            </div>
            <div class="div-tr">
              <div> column td1 </div>
              <div> column td2 </div>
              <div> column td3 </div>
              <div> column td4 </div>
              <div> column td5 </div>
            </div>
            <div class="div-tr">
              <div> column td1 </div>
              <div> column td2 </div>
              <div> column td3 </div>
              <div> column td4 </div>
              <div> column td5 </div>
            </div>
            <div class="div-tr">
              <div> column td1 </div>
              <div> column td2 </div>
              <div> column td3 </div>
              <div> column td4 </div>
              <div> column td5 </div>
            </div>
            <div class="div-tr">
              <div> column td1 </div>
              <div> column td2 </div>
              <div> column td3 </div>
              <div> column td4 </div>
              <div> column td5 </div>
            </div>
            <div class="div-tr">
              <div> column td1 </div>
              <div> column td2 </div>
              <div> column td3 </div>
              <div> column td4 </div>
              <div> column td5 </div>
            </div>
            <div class="div-tr">
              <div> column td1 </div>
              <div> column td2 </div>
              <div> column td3 </div>
              <div> column td4 </div>
              <div> column td5 </div>
            </div>
            <div class="div-tr">
              <div> column td1 </div>
              <div> column td2 </div>
              <div> column td3 </div>
              <div> column td4 </div>
              <div> column td5 </div>
            </div>
            <div class="div-tr">
              <div> column td1 </div>
              <div> column td2 </div>
              <div> column td3 </div>
              <div> column td4 </div>
              <div> column td5 </div>
            </div>
            <div class="div-tr">
              <div> column td1 </div>
              <div> column td2 </div>
              <div> column td3 </div>
              <div> column td4 </div>
              <div> column td5 </div>
            </div>
            <div class="div-tr">
              <div> column td1 </div>
              <div> column td2 </div>
              <div> column td3 </div>
              <div> column td4 </div>
              <div> column td5 </div>
            </div>
            <div class="div-tr">
              <div> column td1 </div>
              <div> column td2 </div>
              <div> column td3 </div>
              <div> column td4 </div>
              <div> column td5 </div>
            </div>
            <div class="div-tr">
              <div> column td1 </div>
              <div> column td2 </div>
              <div> column td3 </div>
              <div> column td4 </div>
              <div> column td5 </div>
            </div>
            <div class="div-tr">
              <div> column td1 </div>
              <div> column td2 </div>
              <div> column td3 </div>
              <div> column td4 </div>
              <div> column td5 </div>
            </div>
            <div class="div-tr">
              <div> column td1 </div>
              <div> column td2 </div>
              <div> column td3 </div>
              <div> column td4 </div>
              <div> column td5 </div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

＆＃13;

使用iTextSharp在每个生成pdf的页面上重复thead

0 个答案: