I have written a code to print html in pdf using Gotenberg version 7, pdf library in PHP.
Config to set Gotenberg :
$chromium = Gotenberg::chromium(config('gotenberg.api.host'))
->printBackground()
->margins(0, 0, 0, 0)
->paperSize('8.27', '11.7'); // A4 dimensions in inches
I am not setting the header and footer as a separate HTML file since I have the complete body and default-background.jpg contains header footer part with background image in it. The main content is overlapping the header and footer on all pages. How to let it start after the header and break before footer on every page.
Has someone faced this similar issue ? Can anyone provide a relevant solution to this ?
MY HTML is available on https://jsfiddle.net/solankiavnee/yapnjqds/
<html lang="en">
<head>
<title>Testing</title>
</head>
<body>
<div class="background"></div>
<div class='watermark-container'>
<div style="position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
opacity: 0.1;
font-size: 130px;
font-family: sans-serif;
transform: rotate(-45deg);
color: #000000;"
>
</div>
</div>
<header>
<div>This is my header</div>
</header>
<main>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
<div>This is my Body</div>
</main>
<footer>
<div>This is my footer</div>
</footer>
</body>
</html>
CSS is ::
@page {
margin: 0;
}
html {
height: 1123px;
width: 794px;
font-family: DejaVu Sans, Arial, sans-serif;
font-size: 11pt;
letter-spacing: -0.2pt;
}
body {
margin: 0;
padding: 0;
}
table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
table tr td, table tr th {
margin: 0;
padding: 0;
}
p {
margin: 0 0 9px 0;
padding: 0;
}
hr {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5 {
margin: 0;
}
header {
position: fixed;
top: 0;
width: 100%;
color: #FFFFFF;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
height: 36px;
color: #FFFFFF;
}
footer > table {
height: 100%;
color: #FFFFFF;
}
footer table td{
color: #FFFFFF;
}
footer.pre-footer {
bottom: -8;
color: #000000;
}
main {
margin: 54px 18px;
page-break-inside: auto !important;
}
div.background {
z-index: -1;
position: fixed;
top:0;
left: 0;
bottom: 0;
right: 0;
background-size: 100% 100%;
background-image: url('default-background.jpg);
}
h1 {
letter-spacing: 1px;
margin: 0;
padding: 0;
}
/**
* Spacing
*/
.pa-3 { padding: 18px; } .pa-2 { padding: 9px; } .pa-1 { padding: 4.5px; } .pa-0 { padding: 0; }
.px-3 { padding-left: 18px; padding-right: 18px; } .px-2 { padding-left: 9px; padding-right: 9px; } .px-1 { padding-left: 4.5px; padding-right: 4.5px; } .px-0 { padding-left: 0; padding-right: 0; }
.py-3 { padding-top: 18px; padding-bottom: 18px; } .py-2 { padding-top: 9px; padding-bottom: 9px; } .py-1 { padding-top: 4.5px; padding-bottom: 4.5px; } .py-0 { padding-top: 0; padding-bottom: 0; }
.pt-3 { padding-top: 18px; } .pt-2 { padding-top: 9px; } .pt-1 { padding-top: 4.5px; } .pt-0 { padding-top: 0; }
.pb-4 { padding-bottom: 36px; } .pb-3 { padding-bottom: 18px; } .pb-2 { padding-bottom: 9px; } .pb-1 { padding-bottom: 4.5px; } .pb-0 { padding-bottom: 0; }
.pl-3 { padding-left: 18px; } .pl-2 { padding-left: 9px; } .pl-1 { padding-left: 4.5px; } .pl-0 { padding-left: 0; }
.pr-3 { padding-right: 18px; } .pr-2 { padding-right: 9px; } .pr-1 { padding-right: 4.5px; } .pr-0 { padding-right: 0; }
.ma-3 { margin: 18px; } .ma-2 { margin: 9px; } .ma-1 { margin: 4.5px; } .ma-0 { margin: 0; }
.mx-3 { margin-left: 18px; margin-right: 18px; } .mx-2 { margin-left: 9px; margin-right: 9px; } .mx-1 { margin-left: 4.5px; margin-right: 4.5px; } .mx-0 { margin-left: 0; margin-right: 0; }
.my-3 { margin-top: 18px; margin-bottom: 18px; } .my-2 { margin-top: 9px; margin-bottom: 9px; } .my-1 { margin-top: 4.5px; margin-bottom: 4.5px; } .my-0 { margin-top: 0; margin-bottom: 0; }
.mt-3 { margin-top: 18px; } .mt-2 { margin-top: 9px; } .mt-1 { margin-top: 4.5px; } .mt-0 { margin-top: 0; }
.mb-3 { margin-bottom: 18px; } .mb-2 { margin-bottom: 9px; } .mb-1 { margin-bottom: 4.5px; } .mb-0 { margin-bottom: 0; }
.ml-3 { margin-left: 18px; } .ml-2 { margin-left: 9px; } .ml-1 { margin-left: 4.5px; } .ml-0 { margin-left: 0; }
.mr-3 { margin-right: 18px; } .mr-2 { margin-right: 9px; } .mr-1 { margin-right: 4.5px; } .mr-0 { margin-right: 0; }
/**
* Colors
*/
.green { color: green; }
.red { color: red; }
.orange { color: orange; }
.muted { color: #333333; }
/**
* Align
*/
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.vertical-align-top { vertical-align: top; }
.vertical-align-middle { vertical-align: middle; }
/**
* Font
*/
.text-lg { font-size: 120%; }
.text-md { font-size: 100%; }
.text-sm { font-size: 80%; }
.text-xs { font-size: 60%; }
.font-weight-bold { font-weight: bold; }
.font-weight-normal { font-weight: normal; }
.font-style-italic { font-style: italic; }
/**
* Borders
*/
.border-b, tr.border-b td { border-bottom: 1px solid #333333; }
.border-t, tr.border-t td { border-top: 1px solid #333333; }
.border-light, tr.border-light td { border-color: #CCCCCC; }
/**
* Sizes
*/
.w-25 { width: 25%; }
.w-50 { width: 50%; }
.w-65 { width: 65%; }
/**
* Tables
*/
table.table-alternating-row-colors tbody tr:nth-child(odd) {
background: #DDDDDD;
}
.tr-spacing-xs > th, .tr-spacing-xs > td {
padding-left: 4.5;
padding-right: 4.5;
}
.tr-spacing-xs > th:first-of-type, .tr-spacing-xs > td:first-of-type {
padding-left: 0;
padding-right: 4.5;
}
.tr-spacing-xs > th:last-of-type, .tr-spacing-xs > td:last-of-type {
padding-left: 4.5;
padding-right: 0;
}
.tr-spacing-sm > th, .tr-spacing-sm > td {
padding-left: 9;
padding-right: 9;
}
.tr-spacing-sm > th:first-of-type, .tr-spacing-sm > td:first-of-type {
padding-left: 0;
padding-right: 9;
}
.tr-spacing-sm > th:last-of-type, .tr-spacing-sm > td:last-of-type {
padding-left: 9;
padding-right: 0;
}
/**
* The below classes only affect the layout when each <th> element has one of the classes below.
*/
.th-shrink {
width: 1%;
white-space: nowrap;
}
.th-grow {
width: 100%;
}
/**
* Text
*/
.text-no-wrap {
white-space: nowrap;
}
.text-white { color: #ffff; }
.text-grey { color: #333; }
.text-lightgrey { color: #777; }
/**
* Float
*/
.float-left {
float: left;
}
.float-right {
float: right;
}
/**
* Page breaks
*/
.no-break {
page-break-inside: avoid;
page-break-after: avoid;
}
.page-break {
page-break-after: always;
}
div.concept {
z-index: 0;
position: fixed;
bottom: 0;
left: 0;
}
div.concept > span {
-webkit-transform: rotate(-60deg);
font-size: 140pt;
opacity: .1;
}
img.logo {
margin: 0;
max-width: 200px;
max-height: 52px;
}
img.associationLogo {
margin: 0;
max-width: 200px;
max-height: 38px;
}
