CSS + XHTML2PDF：每页仅强制一张表

编程问答 2022-06-03

问题描述

尝试在xhtml2pdf生成的pdf文档中每页输出一张表格。

文档中没有任何内容真正说明如何实现这一目标，而前端的东西并不是我的强项

这是我到目前为止得到的：

{% load static %}
<!DOCTYPE html>
<html>
<head>
<style>
    @page {
        @frame header_frame {           /* Static Frame */
            -pdf-frame-content: header_content;
            left: 50pt; width: 512pt; top: 50pt; height: 200pt;
        }
        size: a4 portrait;
        @frame content_frame {/* Content Frame */
            left: 50pt; width: 512pt; top: 230pt; height: 700pt;
        }
    }
        
        
table {
    width:100%;
}
    
    table.print-friendly tr td,table.print-friendly tr th {
        page-break-inside: avoid;
    }
   
table,th,td {
    border: 1px solid black;
    border-collapse: collapse;
}
th,td {
    padding: 2px;
    text-align: left;
}
table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
   background-color: #fff;
}
/* table#t01 th {
    background-color: black;
    color: white;
} */
body{
    font-size: 12px;
}
h1,h2,h3,h4,h5,h6,p{
    padding: 0;
    margin: 0;
}
img{
    float: left;
}

</style>
</head>
<body>




 <div id="header_content">
    <th colspan="5" style="text-align: center;">
        <div style="text-align: left">
            <h3></h3>
            
            <p style="padding-bottom: 2px; margin: 0; font-size: 20px;">{{ my_company.name }}</p>
            <p style="padding-bottom: 2px; margin: 0; font-size: 10px;">{{ my_company.address }}</p>
            <p style="padding-bottom: 2px; margin: 0; font-size: 10px;">{{ my_company.city }},{{ my_company.zip_code }}</p>
            <p style="padding-bottom: 2px; margin: 0; font-size: 10px;">{{ my_company.zip_code }}</p>
            <p style="padding-bottom: 2px; margin: 0; font-size: 10px;">Tel: {{ my_company.telephone }}</p>
            <p style="padding-bottom: 2px; margin: 0; font-size: 10px;">SIRET: {{ my_company.registration_number }}</p>
            <h3 style="padding-bottom: 2px; margin: 0;">
                    
            </h3>
           
        </div>
    </th>
 
      <th colspan="3" style="text-align: center;">
        <div style="text-align: right">
            <h3></h3>
            
            
            <p style="padding-bottom: 2px; margin: auto; font-size: 14px;">To: {{ customer  }}</p>
   
          </div>
         
          </div>
    
    <th colspan="3" style="text-align: center;">
        <div style="text-align: right">
            <h3></h3>
            <p style="padding-bottom: 4px; margin: auto; font-size: 18px;"> Invoice No: {{ invoice_number }}</p>
            <p style="padding-bottom: 2px; margin: auto; font-size: 15px;"> Date: {{  Date }}</p>
            <br>
            <br>
            </th>
    </div>

          
<table class='print-friendly' id="t01">
  <tr>
    <th style="text-align: center; width: 30%">Designation</th> 
    <th style="text-align: center; width: 80%">Description</th> 
    <th style="text-align: center; width: 15%">Quantity</th>
    <th style="text-align: center; width: 15%">Rate</th>
    <th style="text-align: center; width: 25%">Total</th>
  </tr>
  
    {% for a,b in tableau  %}
  <tr>

        <td> {{ b.Id }}<br><br></td> 
        <td> {{ b.Description }}<br><br></td> 
        <td>{{ b.Quantity }}</td>
        <td>{{ a }} $ </td>
        <td>{{ b.NetAmount }} $ </td>
        
      
    </tr>
    {% endfor %}
   
  

  <!-- {% if works|length == 1 %}
    <tr style="border-bottom-style: hidden;">
        <td style="padding-top: 100px;"> </td>
        <td style="padding-top: 100px;"> </td>
        <td style="padding-top: 100px;"> </td>
        <td style="padding-top: 100px;"> </td>
        <td style="padding-top: 100px;"> </td>
    </tr>
    <tr style="border-bottom-style: hidden;">
        <td style="padding-top: 100px;"> </td>
        <td style="padding-top: 100px;"> </td>
        <td style="padding-top: 100px;"> </td>
        <td style="padding-top: 100px;"> </td>
        <td style="padding-top: 100px;"> </td>
    </tr>
    <tr>
        <td style="padding-top: 100px;"> </td>
        <td style="padding-top: 100px;"> </td>
        <td style="padding-top: 100px;"> </td>
        <td style="padding-top: 100px;"> </td>
        <td style="padding-top: 100px;"> </td>
    </tr>
  {% endif %}
  {% if works|length == 2 %}
    <tr style="border-bottom-style: hidden;">
        <td style="padding-top: 100px;"> </td>
        <td style="padding-top: 100px;"> </td>
        <td style="padding-top: 100px;"> </td>
        <td style="padding-top: 100px;"> </td>
        <td style="padding-top: 100px;"> </td>
    </tr>
    <tr>
        <td style="padding-top: 100px;"> </td>
        <td style="padding-top: 100px;"> </td>
        <td style="padding-top: 100px;"> </td>
        <td style="padding-top: 100px;"> </td>
        <td style="padding-top: 100px;"> </td>
    </tr>
  {% endif %} -->

<tr>
    
    <td colspan="4"><b> Total Before Tax:</b> </td>

    
    <td>{{total_ht}} $</td>
    
    
</tr>
    <tr>
        <td colspan="4"><b> TVA {{ my_company.TVA }} %:</b> </td>
        <td>{{ tva_value }}$</td>

   
    </tr>
    
    <tr>
        <td colspan="4"><b> Total TTC:</b> </td>
        <td>{{ total_ttc }} $</td>
    </tr>


    
</table>
          <br>
          <br>
          <br>
          
           <th colspan="5" style="text-align: center;">
        <div style="text-align: left">
            <h3 style="padding-bottom: 2px; margin: 0; font-size: 10px;">Payment is due within {{ my_company.payment_due_date }} days from the day where the goods are received</h3>
            <br>
            <p style="padding-bottom: 2px; margin: 0; font-size: 10px;">{{ my_company.conditions }}</p>
            <br>
            <p style="padding-bottom: 2px; margin: 0; font-size: 10px;">Tax Identification Number {{ my_company.TVA }}</p>
            
            </th>
    </div>
             
               <br>
               <br>
               <br>
                  
     <th colspan="3" style="text-align: center;">
        <div style="text-align: right">
            <h3></h3>
            <p style="padding-bottom: 4px; margin: auto; font-size: 18px;"> Shipping No: {{ shipping_number }}</p>
            <p style="padding-bottom: 2px; margin: auto; font-size: 15px;"> Date: {{  Date }}</p>
            <br>
            <br>
            </th>
    </div>
         
<table class='print-friendly' id="t01">
  <tr>
    <th style="text-align: center; width: 30%">Designation</th> 
    <th style="text-align: center; width: 80%">Description</th> 
    <th style="text-align: center; width: 15%">Quantity</th>
    <th style="text-align: center; width: 15%">Rate</th>
    <th style="text-align: center; width: 25%">Total</th>
   
  </tr>
  
    {% for a,b in tableau  %}
  <tr>

        <td> {{ b.Id }}<br><br></td> 
        <td> {{ b.Description }}<br><br></td> 
        <td>{{ b.Quantity }}</td>
        <td>{{ a }} $ </td>
        <td>{{ b.NetAmount }} $ </td>
        
      
    </tr>
    {% endfor %}

<tr>
    
    <td colspan="4"><b> Total Before Tax:</b> </td>

    
    <td>{{total_ht}} $</td>
    
    
</tr>
    <tr>
        <td colspan="4"><b> TVA {{ my_company.TVA }} %:</b> </td>
        <td>{{ tva_value }}$</td>

   
    </tr>
    
    <tr>
        <td colspan="4"><b> Total TTC:</b> </td>
        <td>{{ total_ttc }} $</td>
    </tr>


    
</table>
          <br>
          <br>
 
           <th colspan="5" style="text-align: center;">
        <div style="text-align: left">
            <h3 style="padding-bottom: 2px; margin: 0; font-size: 10px;">Shipping is occuring on </h3>
            <br>
            <p style="padding-bottom: 2px; margin: 0; font-size: 10px;">Shipping conditions{{ my_company.conditions }}</p>
            <br>
     
            </th>            
    </div>
               
<br>
    <!-- JavaScript files-->
    <script src="{% static 'vendor/jquery/jquery.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'vendor/popper.js/umd/popper.min.js' %}" type="text/javascript"> </script>
    <script src="{% static 'vendor/bootstrap/js/bootstrap.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'vendor/jquery.cookie/jquery.cookie.js' %}" type="text/javascript"> </script>
    <script src="{% static 'vendor/chart.js/Chart.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'vendor/jquery-validation/jquery.validate.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/charts-home.js' %}"></script>
    <script src="{% static 'js/front.js' %}"></script>

</body>

问题又来了：如何强制每页一张表，或者至少让一个新表从新页开始

解决方法

如果有人遇到这个问题

添加标签 <pdf:nextpage> 将在该标签之后创建一个新页面。这是具有更多功能的链接https://fwpn.org.pl/assets/event_attachments/asd.html