How to repeat HTML Tables Header and Footer in PDF using VeryPDF Cloud HTML to PDF Converter API? Table thead, tfoot, tbody in Cloud HTML to PDF API

Hello,

I have CSS and HTML that I will be converting into PDF. I want to specify a header on each page that, in the PDF, will repeat on each new page.

I know that I can use THEAD to specify the header, however, is there a html-to-pdf converter that will respect the THEAD tag?

If not, are there any alternatives?

--------------------------------------------------------

I have a table where we define (Using the html tags) the thead, tfoot, and tbody.  The tfoot row is a total row that appears at the bottom of the table in the html rendered page in the browser.

According to what I have read, and this is the only way it appears correctly in the browser, you must define the tfoot before the tbody. The following from

http://www.w3schools.com/tags/tag_tfoot.asp

Definition and Usage
The tag is used to group the footer content in an HTML table.
The tfoot element should be used in conjunction with the thead and tbody elements.
The thead element is used to group the header content in an HTML table and the tbody element is used to group the body content in an HTML table.

Note: must appear before within a table, so that a browser can render the foot before receiving all the rows of data.

Notice that these elements will not affect the layout of the table by default. However, you can use CSS to let these elements affect the table's layout.

What I see in the generated PDF is the Thead, then Tfoot, then Tbody.  It appears that VeryPDF does not render the same as the browser.

If you have another way to define a table footer or maybe there is something I can do in the css. Anyway, just wanted to let you know.

Thanks...
Customer
--------------------------------------------------------
For thead to repeat on every page the possible solution is to set it's style to:

@media print {
  thead {
    display: table-header-group;
  }
}

VeryPDF Cloud HTML to PDF Converter API will automatically repeat the thead of a HTML table on each PDF page where the table is laid out when the thead style contains display: table-header-group. The converter will automatically repeat the tfoot of a HTML table on each PDF page where the table is laid out when the tfoot style contains display: table-footer-group. Below there is as simple example of a HTML table having a header and a footer which will be repeated on each PDF page.

HTML Document with THEAD and TFOOT to Repeat

<html>
 <head>
     <title>Auto Repeat Thead</title>
 </head>
 <body style="margin: 0px">
     <table style="width: 750px;">
         <!-- table header to be repeated on each PDF page -->
         <thead align="left" style="display: table-header-group">
             <tr>
                 <th>
                     <table style="width: 100%; border-bottom: 1px solid Black">
                         <tr>
                             <td style="width: 50px; vertical-align: middle">
                                 <img style="width: 50px; border: 0px" alt="VeryPDF Logo Image" src="Images/VeryPDFLogo.jpg" />
                             </td>
                             <td style=
"vertical-align: middle; font-family: Times New Roman; font-size: 20px;
                                 color: Navy"
>
                                 Quickly Create High Quality PDFs
                            
</td>
                         </tr>
                     </table>
                 </th>
             </tr>
         </thead>
         <!-- table footer to be repeated on each PDF page -->
         <tfoot align="left" style="display: table-footer-group">
             <tr>
                 <td>
                     <table style="width: 100%; border-top: 1px solid Black">
                         <tr>
                             <td style=
"vertical-align: middle; font-family: Times New Roman; font-size: 20px;
                                 color: Green"
>
                                 Table Footer to Repeat on Each PDF Page
                            
</td>
                             <td style="width: 50px; vertical-align: middle">
                                 <img style="width: 50px; border: 0px" alt="VeryPDF Logo Image" src="Images/VeryPDFLogo.jpg" />
                             </td>
                         </tr>
                     </table>
                 </td>
             </tr>
         </tfoot>
         <!-- table body -->
         <tbody>
             <tr>
                 <td style="font-family: Times New Roman; font-size: 18px">
                     Row 1 of a HTML table with a header to be automatically repeated on all the PDF
                     pages
                
</td>
             </tr>
             <tr>
                 <td style="font-family: Times New Roman; font-size: 18px">
                     Row 2 of a HTML table with a header to be automatically repeated on all the PDF
                     pages
                
</td>
             </tr>
             <tr>
                 <td style="font-family: Times New Roman; font-size: 18px">
                     Row 3 of a HTML table with a header to be automatically repeated on all the PDF
                     pages
                
</td>
             </tr>
             <!-- ..........-->
             <tr>
                 <td style="font-family: Times New Roman; font-size: 18px">
                     Row 398 of a HTML table with a header to be automatically repeated on all the PDF
                     pages
                
</td>
             </tr>
             <tr>
                 <td style="font-family: Times New Roman; font-size: 18px">
                     Row 399 of a HTML table with a header to be automatically repeated on all the PDF
                     pages
                
</td>
             </tr>
             <tr>
                 <td style="font-family: Times New Roman; font-size: 18px">
                     Row 400 of a HTML table with a header to be automatically repeated on all the PDF
                     pages
                
</td>
             </tr>

        
</tbody>
     </table>
 </body>
 </html
>

 

Here is a demo HTML page which contain thead, tbody and tfoot sections,

http://online.verypdf.com/examples/cloud-api/table-header-footer.html

You can run following URL to convert this HTML file to PDF file properly, the thead and tfoot are repeated in two or more pages,

http://online.verypdf.com/api/?apikey=XXXX-XXXX-XXXX-XXXX&app=html2pdf&infile=http://online.verypdf.com/examples/cloud-api/table-header-footer.html&outfile=out.pdf

This is original HTML file which contain repeated thead and tfoot sections,

image

This is the converted PDF file, as you see, thead and tfoot are repeated in PDF file, everything is fine,

image

More information for VeryPDF Cloud API Platform can be found from following web page,

https://www.verypdf.com/online/cloud-api/try-and-buy.html

VeryPDF

VN:F [1.9.20_1166]
Rating: 8.3/10 (4 votes cast)
VN:F [1.9.20_1166]
Rating: 0 (from 0 votes)
How to repeat HTML Tables Header and Footer in PDF using VeryPDF Cloud HTML to PDF Converter API? Table thead, tfoot, tbody in Cloud HTML to PDF API, 8.3 out of 10 based on 4 ratings

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *


Verify Code   If you cannot see the CheckCode image,please refresh the page again!