Here’s the generated pdf of wkhtmltopdf the second page doesn’t have a background color and border. I want to apply background-color and border for every page using laravel blade and wkhtmltopdf.
Here’s the body and footer CSS:
body {
/* box-sizing: border-box; */
font-family: "Open Sans", sans-serif;
padding-top: 8px;
padding-bottom: 0;
margin-bottom: 0;
}
.container {
background-color: #e8e8e8 !important;
width: 99.2%;
height: 759px !important;
height: auto;
border-top: 6px solid #383434;
border-left: 6px solid #383434;
border-right: 6px solid #383434;
padding: 10px 0px 10px 0px;
}
.content {
width: 306px !important;
min-height: 350px;
/* height: 753px !important; */
background-color: #474747;
display: flex;
flex-direction: row;
display: -webkit-box; /* wkhtmltopdf uses this one */
color: white;
border-radius: 2%;
margin-left: 8px;
margin-right: 4px;
font-weight: 400;
font-family: "Open Sans", sans-serif;
font-size: 12px;
page-break-inside: avoid;
}
.footer {
background-color: black;
width: 100%;
}
.top-section {
background-color: #383434;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
color: white;
position: relative;
display: table;
width: 100.1%;
font-family: "Open Sans", sans-serif;
font-weight: 700;
font-size: 16px;
}
.bottom-section {
display: flex;
display: -webkit-box; /* wkhtmltopdf uses this one */
flex-direction: row;
color: white;
flex-wrap: wrap;
-webkit-box-pack: center; /* wkhtmltopdf uses this one */
justify-content: center;
height: 175px;
}Here’s the body laravel blade:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?
family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<title>Proof of Order</title>
</head>
<body>
<!-- content -->
<div class="container">
<table class="ct-table">
<tr>
<td>
<div class="content">
<div class="left-content">
<p>Product(s): 1,2,3,4</p>
<h>Material Type:</h>
<div class="type">
<div class="box"></div>
<div><p>Windows Graphics</p></div>
</div>
<p>Dimensions:</p>
<ul class="dimensions">
<li>1 - W: 49.5"| H: 54.25"</li>
<li>2 - W: 49.5"| H: 54.25"</li>
<li>3 - W: 49.5"| H: 35.25"</li>
<li>4 - W: 49.5"| H: 35.25"</li>
</ul>
<p>Options:</p>
<!--Addition of option list in table layout-->
<table class="option-list" id="option-list">
<tr>
<td> <img src="price_point.svg" alt=""
class="option-logo"></td>
<td> <p>Price Point 2/$4.00</p></td>
</tr>
</table>
<table class="option-list">
<tr>
<td> <img src="comments.svg" alt=""
class="option-logo"></td>
<td> <p>Comments/Text: "Thanks for Shopping"</p>
</td>
</tr>
</table>
<table class="option-list">
<tr>
<td><img src="logo.svg" alt="" class="option-
logo"></td>
<td><p>Logo: logo.png</p></td>
</tr>
</table>
</ul>
<!--Addition of quanity count in table layout-->
<table class="quantity-table">
<tr>
<td><p>Quantity: 2</p></td>
<td> <img src="qty.svg" alt="" class="option-logo"></td>
</tr>
</table>
</div>
<div class="right-content">
<img src="me_1.jpg" alt="">
</div>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>Here’s the php code:
$footerHtml = view()->make('admin.reports.final_proof.footer', compact('data'))-
>render();
$pdf = PDF::loadView('admin.reports.final_proof.pdf', compact('data', 'products',
'no_of_products'))
->setOptions(array(
'page-size' => 'A4',
'margin-top' => 0,
'margin-right' => 0,
'margin-left' => 0,
'margin-bottom' => 48,
'encoding' => 'UTF-8',
'footer-html' => $footerHtml,
'enable-javascript' => true,
'page-width'=>'279.5',
'page-height'=>'216.0'
));
Here’s the footer laravel blade:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Proof of Order</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<script>
var pdfInfo = {};
var x = document.location.search.substring(1).split('&');
for (var i in x) {
var z = x[i].split('=', 2);
pdfInfo[z[0]] = unescape(z[1]);
}
function getPdfInfo() {
var page = pdfInfo.page || 1;
var pageCount = pdfInfo.topage || 1;
document.getElementById('pdfkit_page_current').textContent = page;
document.getElementById('pdfkit_page_count').textContent = pageCount;
}
</script>
</head>
<body onload="javascript:getPdfInfo()" style="margin-top:0;padding-top:0;">
<div class="footer">
<div class="top-section">
<p>ORDER# MEC_EO-150454_AbingstonStopNGas</p>
<p>PAGE 1 OF 1</p>
<p>Designer: Ryan Test</p>
</div>
<div class="bottom-section">
<div class="logo">
<img src="monster_energy.png" alt="">
</div>
<div class="order">
<!--Changing into table layout since flex/grid feature doesn't work-->
<table class="option-list" id="option-list">
<tr>
<td> <div class="order-type">
<img src="man.png" alt="">
<p>Ordered By</p>
</div></td>
<td> <div class="text-content">
<p>Johnboy VanSampson</p>
<p>[email protected]</p>
<p>720-555-5698</p>
</div></td>
</tr>
</table>
</div>
<div class="location">
<!--Changing into table layout since flex/grid feature doesn't work-->
<table class="option-list" id="option-list">
<tr>
<td> <div class="order-type">
<img src="shop.png" alt="">
<p>Project <br> Location</p>
</div></td>
<td> <div class="text-content">
<p>Abington Stop N Gas</p>
<p>Attn:Johnboy VanSampson</p>
<p>1562 Hiltop Pallace Blvd.</p>
<p>Swingtown, NJ 77895</p>
</div></td>
</tr>
</table>
</div>
<div class="shipping">
<!--Changing into table layout since flex/grid feature doesn't work-->
<table class="option-list" id="option-list">
<tr>
<td> <div class="order-type">
<img src="car.png" alt="">
<p>Shipping</p>
</div></td>
<td> <div class="text-content">
<p>Abington Stop N Gas</p>
<p>Attn:Johnboy VanSampson</p>
<p>1562 Hiltop Pallace Blvd.</p>
<p>Swingtown, NJ 77895</p>
</div></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>