How To Set Footer Image In Html
Acquire how to configure an HTML/Image based header and footer on your PDF using Dompdf.
Many PDFs have a Footer and Header where you need to place the logo of the enterprise, addresses, emails etc. In Dompdf this may be a little tricky due to the margins or the size of the page, so yous need to be patient and exam continously different sizes and setting what fits in your case. In this commodity, we'll show yous how to implement a header and footer on your PDF using HTML or images in Dompdf.
A. HTML Based Header/Footer
If y'all only want to gear up HTML on your footer and header, it will be enough to include the header and footer tags in the certificate with a specific dimensions. The position of both elements need to be fixed, otherwise they will be relative to the content of your PDF, thing that manifestly nosotros don't want. Yous need to provide the dimensions of the page as well according to your needs. The following case generates a PDF of 2 pages with margins of the described height:
<html> <head> <style> /** Define the margins of your page **/ @page { margin: 100px 25px; } header { position: fixed; meridian: -60px; left: 0px; right: 0px; height: 50px; /** Extra personal styles **/ background-color: #03a9f4; colour: white; text-align: centre; line-tiptop: 35px; } footer { position: stock-still; bottom: -60px; left: 0px; correct: 0px; summit: 50px; /** Actress personal styles **/ groundwork-color: #03a9f4; color: white; text-align: centre; line-height: 35px; } </fashion> </head> <torso> <!-- Define header and footer blocks before your content --> <header> Our Lawmaking World </header> <footer> Copyright &re-create; <?php echo date("Y");?> </footer> <!-- Wrap the content of your PDF inside a main tag --> <main> <p style="page-break-after: always;"> Content Page 1 </p> <p style="page-break-afterwards: never;"> Content Folio 2 </p> </main> </trunk> </html> If you generate the previous markup, the generated PDF will look like:
The header and footer repeats itself on every page of the PDF. You tin can obviously append the HTML that you want inside them, as this is just an example, we made it and so simple as possible.
B. Full width HTML Based Header/Footer
With the previous approach, you have a little problem. The header and the footer fit inside the margins of the page, which sometimes isn't exactly what you demand. In instance that you need that the footer and header take the aforementioned width of the paper sheet, you lot need to go on different. If this is the case, you may do the following: set the margins of the page to 0, this will automatically make that all the content of the PDF fits in the entire sheet, making that the footer and header have the 100% width. Only you take another problem at present and that is the margins of the existent content of your PDF. This can be set with margins on the torso, note that the margins (at least the tiptop and bottom) need to exist greater than the height of the footer and header or you won't come across office of your content. Equally final, apply your own styles to the elements as shown in the following example:
<html> <caput> <style> /** Set up the margins of the page to 0, so the footer and the header can be of the full height and width ! **/ @page { margin: 0cm 0cm; } /** Define now the real margins of every page in the PDF **/ body { margin-top: 2cm; margin-left: 2cm; margin-right: 2cm; margin-lesser: 2cm; } /** Ascertain the header rules **/ header { position: fixed; top: 0cm; left: 0cm; right: 0cm; peak: 2cm; /** Extra personal styles **/ groundwork-colour: #03a9f4; colour: white; text-align: heart; line-summit: ane.5cm; } /** Ascertain the footer rules **/ footer { position: fixed; bottom: 0cm; left: 0cm; right: 0cm; height: 2cm; /** Extra personal styles **/ background-colour: #03a9f4; color: white; text-align: middle; line-height: 1.5cm; } </style> </caput> <body> <!-- Ascertain header and footer blocks before your content --> <header> Our Code Globe </header> <footer> Copyright &re-create; <?php echo date("Y");?> </footer> <!-- Wrap the content of your PDF within a master tag --> <chief> <h1>Howdy World</h1> </main> </torso> </html> The markup in Dompdf would generate the post-obit PDF:
C. Image Based Header/Footer
If you want to add an image as footer and header, y'all will need to follow the same construction of the Full Width Html Based Header and Footer. However the content of the footer and header would exist now an img tag with the respective image (with full peak and width).
<html> <head> <style> /** Ready the margins of the folio to 0, so the footer and the header can be of the full acme and width ! **/ @page { margin: 0cm 0cm; } /** Ascertain now the real margins of every page in the PDF **/ body { margin-top: 3cm; margin-left: 2cm; margin-right: 2cm; margin-bottom: 2cm; } /** Define the header rules **/ header { position: stock-still; summit: 0cm; left: 0cm; correct: 0cm; pinnacle: 3cm; } /** Define the footer rules **/ footer { position: fixed; bottom: 0cm; left: 0cm; right: 0cm; superlative: 2cm; } </manner> </head> <trunk> <!-- Define header and footer blocks before your content --> <header> <img src="header.png" width="100%" height="100%"/> </header> <footer> <img src="footer.png" width="100%" acme="100%"/> </footer> <!-- Wrap the content of your PDF inside a main tag --> <chief> <h1>Hello Earth</h1> </principal> </body> </html> The previous markup would generate in Dompdf something like:
Note
To become a perfect PDF with Header and Footer based on an image, yous may need to experiment, change heights in CSS and fifty-fifty resize the paradigm until everything passes as expected.
Happy coding !
How To Set Footer Image In Html,
Source: https://ourcodeworld.com/articles/read/687/how-to-configure-a-header-and-footer-in-dompdf
Posted by: siufirembles.blogspot.com
0 Response to "How To Set Footer Image In Html"
Post a Comment