I use laravel-dompdf to generate my receipt, it should only generate one page, but it will generate 5 pages with the style of my CSS, the information will become messes. This was the example that i have generate https://imgur.com/a/diyVaRJ. I also include my controller and view for dompdf
Controller
public function downloadReceiptPDF($id)
{
$campaigns = DB::table('bill')
->select('bill.b_id', 'c_code', 'c_name', 'b_fee', 'b_date', 'total_month')
->join('campaign', 'campaign.c_id', '=', 'bill.c_id')
->where('bill.b_id', $id)
->get();
$pdf = PDF::loadView('campaign.receiptpdf', compact('campaigns'))->setPaper('a4', 'potrait');
return $pdf->download('receipt.pdf');
}
View : receiptpdf.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Invoice</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
.invoice-box {
max-width: 800px;
margin: auto;
padding: 30px;
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, .15);
font-size: 16px;
line-height: 24px;
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color: #555;
}
.invoice-box table {
width: 100%;
line-height: inherit;
text-align: left;
}
.invoice-box table td {
padding: 5px;
vertical-align: top;
}
.invoice-box table tr td:nth-child(2) {
text-align: right;
}
.invoice-box table tr.top table td {
padding-bottom: 20px;
}
.invoice-box table tr.top table td.title {
font-size: 45px;
line-height: 45px;
color: #333;
}
.invoice-box table tr.information table td {
padding-bottom: 40px;
}
.invoice-box table tr.heading td {
background: #eee;
border-bottom: 1px solid #ddd;
font-weight: bold;
}
.invoice-box table tr.details td {
padding-bottom: 20px;
}
.invoice-box table tr.item td {
border-bottom: 1px solid #eee;
}
.invoice-box table tr.item.last td {
border-bottom: none;
}
.invoice-box table tr.total td:nth-child(2) {
border-top: 2px solid #eee;
font-weight: bold;
}
#media only screen and (max-width: 600px) {
.invoice-box table tr.top table td {
width: 100%;
display: block;
text-align: center;
}
.invoice-box table tr.information table td {
width: 100%;
display: block;
text-align: center;
}
}
/** RTL **/
.rtl {
direction: rtl;
font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
}
.rtl table {
text-align: right;
}
.rtl table tr td:nth-child(2) {
text-align: left;
}
</style>
</head>
<body>
<div class="invoice-box">
<table cellpadding="0" cellspacing="0">
<tr class="top">
<td colspan="2">
<table>
<tr>
<td class="title">
</td>
<td>
Receipt #: {{ $campaigns[0]->b_id }}
<br> Date: {{ \Carbon\Carbon::parse($campaigns[0]->b_date)->format('d/m/Y') }}
<br>
</td>
</tr>
</table>
</td>
</tr>
<tr class="information">
<td colspan="2">
<table>
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
<tr class="heading">
<td>
Campaign Code
</td>
<td>
Price
</td>
</tr>
<tr class="item last">
<td>
{{ $campaigns[0]->c_code }} ({{ $campaigns[0]->total_month }} months)
</td>
<td>
{{ $campaigns[0]->b_fee }}
</td>
</tr>
<tr class="total">
<td></td>
<td>
Total: RM {{ $campaigns[0]->b_fee }}
</td>
</tr>
</table>
</div>
</body>
</html>
Related
I want to send an email but email show pure html:
public function build(){
return $this->subject('finish service')
->view('emails.subscribers',['msg'=>$this->msg]);
}
my template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>آریانت</title>
<style>
* {
margin: 0;
padding: 0;
}
* {
font-family: IRANYekan, Helvetica, Tahoma, Arial, sans-serif;
}
img {
max-width: 100%;
vertical-align: middle;
}
body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
width: 100% !important;
height: 100%;
direction: rtl;
font-size: 15px;
background-color: #F1F3F4;
}
a {
color: #2ba6cb;
text-decoration: none;
}
.table-wrapper {
width: 100%;
background-color: #F1F3F4;
max-width: 700px;
margin: 0 auto;
direction: rtl;
padding: 0 40px;
}
.table-header,
.table-body,
.table-footer {
width: 100%;
background-color: #fff;
}
.table-header {
background-image: url(https://www.ariaservice.net/app/uploads/email/bg-header.png);
background-repeat: no-repeat;
background-position: center bottom;
background-size: cover;
padding: 10px 15px;
}
.logo > img {
height: 50px;
}
.table-nav {
margin: 0;
padding: 0;
list-style: none;
text-align: left;
}
.table-nav > li {
display: inline-block;
}
.table-nav > li + li {
margin-right: 15px;
}
.table-nav > li > a {
font-weight: bold;
color: #fff;
}
.table-nav > li > a:hover {
opacity: 0.7;
}
.table-body {
padding: 15px 15px 40px;
}
.table-price th,
.table-body td {
padding: 10px;
}
.btn {
background-color: rgb(63, 141, 247);
font-weight: bold;
color: #fff;
padding: 0 20px;
border-radius: 37px;
height: 37px;
line-height: 37px;
white-space: nowrap;
display: inline-block;
}
.btn:hover {
background-color: rgb(87, 190, 146);
color: #fff;
}
.table-price {
width: 100%;
border-collapse: collapse;
}
.table-price th,
.table-price td {
border: 1px solid #000;
}
.table-footer {
background-image: url(https://www.ariaservice.net/app/uploads/email/bg-footer.png);
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
padding: 0 50px 70px;
}
.btn-sup {
border-radius: 20px;
background-color: rgb(87, 190, 146);
color: #fff;
position: relative;
text-align: center;
width: 100%
}
.btn-sup > img {
width: 100px;
}
.social-nav {
margin: 30px 0 0;
padding: 0;
list-style: none;
}
.social-nav > li {
display: inline-block;
}
.social-nav > li + li {
margin-right: 15px;
}
.social-nav > li > a:hover {
opacity: 0.7;
}
.social-nav > li > a > img {
height: 32px;
}
.bg-blue {
background-color: rgb(63, 141, 247);
}
.bg-green {
background-color: rgb(87, 190, 146);
}
</style>
</head>
<body>
<table class="table-wrapper">
<tr>
<td>
<table class="table-header">
<tr>
<td>
<img src="https://www.ariaservice.net/app/uploads/email/logo.png" alt="">
</td>
<td>
<ul class="table-nav">
<li>خانه</li>
<li>هاست لینوکس</li>
<li>خرید دامنه</li>
</ul>
</td>
</tr>
<tr>
<td colspan="1000" align="center">
<img src="https://www.ariaservice.net/app/uploads/email/icon-header.png" alt="">
</td>
</tr>
</table>
<table class="table-body">
<tr>
<td>
{{$msg}}
</td>
</tr>
</table>
<table class="table-footer">
<tr>
<td>
<table class="btn-sup">
<tr>
<td width="100">
<img src="https://www.ariaservice.net/app/uploads/email/icon-support.png" alt="">
</td>
<td>
<p>پشتیبانی آنلاین ، آماده پاسخگویی به شماست</p>
<strong dir="ltr">021 9101 2601</strong>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<ul class="social-nav">
<li><img src="https://www.ariaservice.net/app/uploads/email/icon-twitter.png" alt=""></li>
<li><img src="https://www.ariaservice.net/app/uploads/email/icon-facebook.png" alt=""></li>
<li><img src="https://www.ariaservice.net/app/uploads/email/icon-instagram.png" alt=""></li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You need to use ->with() according to docs for laravel 8.
So your code is:
/**
* Build the message.
*
* #return $this
*/
public function build()
{
return $this->subject('finish service')
->view('emails.subscribers')
->with([
'msg' => $this->msg,
]);
}
I'm currently working on a project in which I've to create an invoice using domPDF. I found a template on github for nice invoice.
Now whenever I create a PDF it breaks every table row in new page and create a 5-6 pages PDF.
I've tried tweaking css of this template but no luck.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>A simple, clean, and responsive HTML invoice template</title>
<style>
.invoice-box {
max-width: 800px;
margin: auto;
padding: 30px;
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, .15);
font-size: 16px;
line-height: 24px;
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color: #555;
}
.invoice-box table {
width: 100%;
line-height: inherit;
text-align: left;
}
.invoice-box table td {
padding: 5px;
vertical-align: top;
}
.invoice-box table tr td:nth-child(2) {
text-align: right;
}
.invoice-box table tr.top table td {
padding-bottom: 20px;
}
.invoice-box table tr.top table td.title {
font-size: 45px;
line-height: 45px;
color: #333;
}
.invoice-box table tr.information table td {
padding-bottom: 40px;
}
.invoice-box table tr.heading td {
background: #eee;
border-bottom: 1px solid #ddd;
font-weight: bold;
}
.invoice-box table tr.details td {
padding-bottom: 20px;
}
.invoice-box table tr.item td{
border-bottom: 1px solid #eee;
}
.invoice-box table tr.item.last td {
border-bottom: none;
}
.invoice-box table tr.total td:nth-child(2) {
border-top: 2px solid #eee;
font-weight: bold;
}
#media only screen and (max-width: 600px) {
.invoice-box table tr.top table td {
width: 100%;
display: block;
text-align: center;
}
.invoice-box table tr.information table td {
width: 100%;
display: block;
text-align: center;
}
}
/** RTL **/
.rtl {
direction: rtl;
font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
}
.rtl table {
text-align: right;
}
.rtl table tr td:nth-child(2) {
text-align: left;
}
</style>
</head>
<body>
<div class="invoice-box">
<table cellpadding="0" cellspacing="0">
<tr class="top">
<td colspan="2">
<table>
<tr>
<td class="title">
<img src="https://www.sparksuite.com/images/logo.png" style="width:100%; max-width:300px;">
</td>
<td>
Invoice #: 123<br>
Created: January 1, 2015<br>
Due: February 1, 2015
</td>
</tr>
</table>
</td>
</tr>
<tr class="information">
<td colspan="2">
<table>
<tr>
<td>
Sparksuite, Inc.<br>
12345 Sunny Road<br>
Sunnyville, CA 12345
</td>
<td>
Acme Corp.<br>
John Doe<br>
john#example.com
</td>
</tr>
</table>
</td>
</tr>
<tr class="heading">
<td>
Payment Method
</td>
<td>
Check #
</td>
</tr>
<tr class="details">
<td>
Check
</td>
<td>
1000
</td>
</tr>
<tr class="heading">
<td>
Item
</td>
<td>
Price
</td>
</tr>
<tr class="item">
<td>
Website design
</td>
<td>
$300.00
</td>
</tr>
<tr class="item">
<td>
Hosting (3 months)
</td>
<td>
$75.00
</td>
</tr>
<tr class="item last">
<td>
Domain name (1 year)
</td>
<td>
$10.00
</td>
</tr>
<tr class="total">
<td></td>
<td>
Total: $385.00
</td>
</tr>
</table>
</div>
</body>
</html>
I want PDF output to be like this.
I am trying to display client details as a pdf using dompdf from HTML. Also added a header and footer in the pdf. Some contents in the pdf are displayed under the footer section.
This is the Image of pdf generated, here the data under Other Details are displayed under the footer section. How can change the alignment of content into the next page with a header and footer?
This is the code have written, give a solution
<html>
<head>
<title>Prescription</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
padding: 0;
margin: 0;
font-family: "Times New Roman", Times, serif;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 200px;
padding: 10px 50px;
background-color: #ccc;
border-bottom: 1px solid #1f1f1f;
z-index: 1000;
}
.text-center {
text-align: center;
}
.phone {
float: right;
margin-bottom: 10px;
margin-right: 150px;
}
.phone h4 {
text-align: center;
right: 50px;
}
main {
margin-top: 200px;
padding: 10px 50px;
}
.after-header {
height: 30px;
padding: 10px 0;
}
.patient-id {
float: left;
}
.date-day {
float: right;
}
.page-header {
margin-top: 5px;
padding: 5px;
background-color: aqua;
}
.page-header h2 {
font-family: monospace;
font-size: 20px;
text-align: center;
}
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 50px;
border-bottom: 1px solid #1f1f1f;
border-top: 1px solid #1f1f1f;
z-index: 1000;
}
footer h3 {
padding-left: 50px;
}
.details {
margin-top: 0;
padding: 2px 0;
}
table {
margin: 5px 0;
width: 100%;
border-top: 1px dotted #1f1f1f;
border-right: 1px dotted #1f1f1f;
}
td {
text-align: justify;
padding: 10px;
border-bottom: 1px dotted #1f1f1f;
border-left: 1px dotted #1f1f1f;
}
table tr>td:first-child {
border-left: none;
}
label {
font-weight: bold;
font-size: 15px;
}
</style>
</head>
<body>
<header>
<div class="text-center">
<h1>SPECIALITY CLINIC</h1>
<h2>xxxxxxxx</sub>
</h2>
<h3>Pediatrition</h3>
</div>
<div class="phone">
<h4>Phone: xxxxx</h4>
</div>
</header>
<footer>
<h3>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</h3>
</footer>
<main>
<div class="after-header">
<div class="patient-id">
<h3>Patient Id: 1001</h3>
</div>
<div class="date-day">
<h3>Date: 17/05/2019</h3>
</div>
</div>
<div class="page-header">
<h2>Patient Details</h2>
<hr>
</div>
<div class="details">
<div>
<div style="background-color: #f2f2f2; padding: 5px;">
<h3>General Details</h3>
</div>
</div>
<table>
<col width="10%">
<col width="20%">
<col width="10%">
<col width="10%">
<col width="30%">
<tr>
<td><label>Name:</label></td>
<td colspan="3"><label>Agreesh V S</label></td>
<td rowspan="4"><img src="img.jpg"></td>
</tr>
<tr>
<td><label>Age:</label></td>
<td><label>24</label></td>
<td><label>Gender: </label></td>
<td><label>Male</label></td>
</tr>
<tr>
<td><label>Phone: </label></td>
<td colspan="3"><label>9876543210</label></td>
</tr>
<tr>
<td><label>Email: </label></td>
<td colspan="3"><label>9876543210</label></td>
</tr>
</table>
<div>
<div style="background-color: #f2f2f2; padding: 5px;">
<h3>Personal Details</h3>
</div>
</div>
<table>
<col width="50%">
<col width="50%">
<tr>
<td><label>Date Of Birth:</label></td>
<td colspan="3"><label>18/04/1995</label></td>
</tr>
<tr>
<td><label>Weight</label></td>
<td><label>65 KG</label></td>
</tr>
<tr>
<td><label>Weight at Birth </label></td>
<td colspan="3"><label>2.5 KG</label></td>
</tr>
<tr>
<td><label>Blood Group </label></td>
<td colspan="3"><label>B+ve</label></td>
</tr>
</table>
<div>
<div style="background-color: #f2f2f2; padding: 5px;">
<h3>Other Details</h3>
</div>
</div>
<table>
<col width="50%">
<col width="50%">
<tr>
<td><label>Date Of Birth:</label></td>
<td colspan="3"><label>18/04/1995</label></td>
</tr>
<tr>
<td><label>Weight</label></td>
<td><label>65 KG</label></td>
</tr>
<tr>
<td><label>Weight at Birth </label></td>
<td colspan="3"><label>2.5 KG</label></td>
</tr>
<tr>
<td><label>Blood Group </label></td>
<td colspan="3"><label>B+ve</label></td>
</tr>
</table>
</div>
</main>
</body>
</html>
Keep in mind that when Dompdf positions content it is based on the bounds of the body. If you have a header/footer on the page you need to push it outside the bounds of the body or it will overlap the document content.
A small tweak to your CSS should fix things. First, add a page margin to accommodate your header. Something along the lines of:
#page {
margin: 220px 1in 1in 1in;
}
Then modify the top positioning of your header to push it into that space:
header {
position: fixed;
top: -200px;
left: 0;
right: 0;
height: 200px;
padding: 10px 50px;
background-color: #ccc;
border-bottom: 1px solid #1f1f1f;
z-index: 1000;
}
so im trying to print a pdf with table inside is something like an invoice using HTML/CSS and im calling the data using laravel php. so what i trying to achieve as in this
but until now what i can do is like this
my code is as below:
<style>
* {
margin:0;
padding:0;
font-family: 'Muli' !important;
}
html{
font-family: 'Muli' !important;
padding: 0;
}
body{
padding: 20px;
background-color: #fff;
}
header{
width: 100%;
border-bottom: 1px solid #1f1f1f;
position: fixed;
height: 80px;
padding: 20px 20px 0px;
margin-bottom: 0px;
}
header .address{
width: 50%;
display: inline-block;
vertical-align: middle;
}
header .address p{
color: #6a6a6a;
font-size: 12px;
margin: 0px;
padding: 0px;
padding-top: 20px;
}
header .logo{
width: 49%;
display: inline-block;
vertical-align: top;
}
header .logo img{
padding-top: 10px;
float: right;
height: 50%;
}
.pagenum:before { content: counter(page); }
footer{
position: fixed;
bottom:80px;
}
footer p{
text-align:right;
padding: 15px;
color: #6a6a6a;
font-size: 10px;
}
.details{
margin-top: 100px;
margin-bottom: 10px;
font-size: 12px;
color: #1f1f1f;
}
.new-section{
margin-top: 10px;
margin-bottom: 10px;
font-size: 12px;
color: #1f1f1f;
}
.new-section .title {
font-weight: 500;
text-transform: uppercase;
margin-top: 20px;
padding: 8px 10px 10px 20px;
background-color: #5b5b5b;
color: #fff;
}
.new-section .details {
margin-top: 10px;
}
table{
width: 100%;
}
table thead tr th{
padding: 15px;
font-size: 14px;
font-weight: lighter;
}
table thead tr th:last-child{
text-align: right;
}
table tr td{
padding: 15px;
vertical-align: top;
border-top: 1px solid #b9b9b9;
}
table tr td:last-child{
text-align: right;
}
table tr:last-child td{
border-bottom: 1px solid #b9b9b9;
}
table tr td .receipt-image{
width: 100%;
height: 150px;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
table tr.detail-section td {
border: none;
padding-top: 8px;
padding-bottom: 8px;
}
table thead tr th{
padding-top: 120px;
}
</style>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Expense Report as of {{date('Ymd:His')}}</title>
<link href="https://fonts.googleapis.com/css?family=Muli:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
</head>
<?php
$total_amount = 0;
$total_reimubursable = 0;
$currency = '';
// $path = public_path(preg_replace('/public/', '', $company->company_logo));
$path = public_path('/uploads/header.jpg');
$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = 'data:image/'.$type.';base64,'.base64_encode($data);
?>
<body>
<header>
<div class="address">
<p>{{nl2br($company->company_address)}}</p>
{{-- <p>Digi Telecommunications Sdn Bhd</p>
<p>Lot 10, Jalan Delima 1/1</p>
<p>40000 Shah Alam, Selangor, Malaysia</p> --}}
</div>
<div class="logo">
<img src="{{$base64}}" alt="alt.expense">
</div>
</header>
<footer>
<p>Generated by alt.hr on {{date('d/m/Y') }} <br>
Page: <span class="pagenum"></span></p>
{{-- <p>Email: support#alt.hr</p> --}}
</footer>
<div class="details">
<p>Name: {{$user->name}}</p>
<p>Employee ID: {{$user->employee_id}}</p>
<p>Statement Period: {{\Carbon\Carbon::parse($fromDate)->format('d-M-Y')}} until {{\Carbon\Carbon::parse($toDate)->format('d-M-Y')}}</p>
<p>Report Type: Self</p>
</div>
#foreach($expenses as $expense)
<?php
$total_amount += $expense->total_amount;
$currency = $expense->currency ? : $expense->type->currency;
?>
#endforeach
<div class="new-section">
<div class="title">
Expense Claims Summary
</div>
<div class="details">
<p>Total Claims : {{count($expenses)}}</p>
<p>Total Claim Amount: {{$currency}} {{$total_amount}}</p>
</div>
</div>
<div class="new-section" >
<div class="title">
Transactions
</div>
<div class="details">
<table cellpadding="0" cellspacing="0" style="page-break-before : always;">
<thead>
<tr>
<th>Transaction ID</th>
#if($dateFilter == 'invoice_date')
<th>Submitted Date</th>
#elseif($dateFilter == 'submitted_at')
<th>Invoice Date</th>
#else
<th>Submitted Date</th>
<th>Invoice Date</th>
<th>Reviewed Date</th>
#endif
<th>Expense Type</th>
<th>GST Amount({{$currency}})</th>
<th>Total({{$currency}})</th>
</tr>
</thead>
<tbody>
#foreach($expenses as $expense)
<tr style="background-color: #efeff0;">
<td>{{$expense->ref_no}}</td>
#if($dateFilter == 'invoice_date')
<td>{{$expense->submitted_at ? $expense->submitted_at : ''}}</td>
#elseif($dateFilter == 'submitted_at')
<td>{{$expense->invoice_date ? $expense->invoice_date->format('d-M-Y') : ''}}</td>
#else
<td>{{$expense->submitted_at ? $expense->submitted_at : ''}}</td>
<td>{{$expense->invoice_date ? $expense->invoice_date->format('d-M-Y') : ''}}</td>
<td>{{$expense->approver->last()->pivot->updated_at->format('d-M-Y')}}</td>
#endif
<td>{{$expense->title}}</td>
{{-- <td>{{$expense->user->name}}</td> --}}
<td>{{number_format($expense->gst, 2, '.', '')}}</td>
<td>{{$expense->total_amount}}</td>
</tr>
#if($expense->mileage_amount != '0.00' || $expense->toll_amount != '0.00' || $expense->parking_amount != '0.00')
<tr class="detail-section">
<td>Description</td>
<td>{{$expense->description}}</td>
<td colspan="2"> </td>
</tr>
#endif
#if($expense->mileage_amount != '0.00')
<tr class="detail-section">
<td>Mileage Total</td>
<td>{{$currency}}{{$expense->mileage_amount}} ({{$expense->distance}}{{$expense->type->unit}})</td>
<td colspan="2"> </td>
</tr>
#endif
#if($expense->toll_amount != '0.00')
<tr class="detail-section">
<td>Toll</td>
<td>{{$currency}} {{$expense->toll_amount}}</td>
<td colspan="2"> </td>
</tr>
#endif
#if($expense->parking_amount != '0.00')
<tr class="detail-section">
<td>Parking</td>
<td>{{$currency}} {{$expense->parking_amount}}</td>
<td colspan="2"> </td>
</tr>
#endif
#if($expense->travel_id)
<tr class="detail-section">
<td>Description</td>
<td>{{$expense->travel->description}}</td>
<td colspan="2"> </td>
</tr>
<tr class="detail-section">
<td>Tagged TR</td>
<td>
#foreach($expense->travel->travel_data as $leg)
#if($leg->removed)
#continue
#endif
{{$leg->title}} <br>
#endforeach
</td>
<td colspan="2"> </td>
</tr>
#endif
#endforeach
</tbody>
</table>
</div>
</div>
</body>
</html>
as you can see the table is not displaying where it should be but instead skipping the whole first page and starting on the next page. i need it to print on the first page. how can i do that? my code as below
Well, you use style="page-break-before:always;" on yout table, so of course a page break will be inserted before your table. Just remove this styling and it should work.
so im trying to print a pdf with table inside is something like an invoice using HTML/CSS and im calling the data using laravel php. so what i trying to achieve as in this
but until now what i can do is like this
as you can see the table is not displaying where it should be but instead skipping the whole first page and starting on the next page. i need it to print on the first page. how can i do that? my code as below
<style>
* {
margin:0;
padding:0;
font-family: 'Muli' !important;
}
html{
font-family: 'Muli' !important;
padding: 0;
}
body{
padding: 20px;
background-color: #fff;
}
header{
width: 100%;
border-bottom: 1px solid #1f1f1f;
position: fixed;
height: 80px;
padding: 20px 20px 0px;
margin-bottom: 0px;
}
header .address{
width: 50%;
display: inline-block;
vertical-align: middle;
}
header .address p{
color: #6a6a6a;
font-size: 12px;
margin: 0px;
padding: 0px;
padding-top: 20px;
}
header .logo{
width: 49%;
display: inline-block;
vertical-align: top;
}
header .logo img{
padding-top: 10px;
float: right;
height: 50%;
}
.pagenum:before { content: counter(page); }
footer{
position: fixed;
bottom:80px;
}
footer p{
text-align:right;
padding: 15px;
color: #6a6a6a;
font-size: 10px;
}
.details{
margin-top: 100px;
margin-bottom: 10px;
font-size: 12px;
color: #1f1f1f;
}
.new-section{
margin-top: 10px;
margin-bottom: 10px;
font-size: 12px;
color: #1f1f1f;
}
.new-section .title {
font-weight: 500;
text-transform: uppercase;
margin-top: 20px;
padding: 8px 10px 10px 20px;
background-color: #5b5b5b;
color: #fff;
}
.new-section .details {
margin-top: 10px;
}
table{
width: 100%;
}
table thead tr th{
padding: 15px;
font-size: 14px;
font-weight: lighter;
}
table thead tr th:last-child{
text-align: right;
}
table tr td{
padding: 15px;
vertical-align: top;
border-top: 1px solid #b9b9b9;
}
table tr td:last-child{
text-align: right;
}
table tr:last-child td{
border-bottom: 1px solid #b9b9b9;
}
table tr td .receipt-image{
width: 100%;
height: 150px;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
table tr.detail-section td {
border: none;
padding-top: 8px;
padding-bottom: 8px;
}
table thead tr th{
padding-top: 120px;
}
</style>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Expense Report as of {{date('Ymd:His')}}</title>
<link href="https://fonts.googleapis.com/css?family=Muli:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
</head>
<?php
$total_amount = 0;
$total_reimubursable = 0;
$currency = '';
// $path = public_path(preg_replace('/public/', '', $company->company_logo));
$path = public_path('/uploads/header.jpg');
$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = 'data:image/'.$type.';base64,'.base64_encode($data);
?>
<body>
<header>
<div class="address">
<p>{{nl2br($company->company_address)}}</p>
{{-- <p>Digi Telecommunications Sdn Bhd</p>
<p>Lot 10, Jalan Delima 1/1</p>
<p>40000 Shah Alam, Selangor, Malaysia</p> --}}
</div>
<div class="logo">
<img src="{{$base64}}" alt="alt.expense">
</div>
</header>
<footer>
<p>Generated by alt.hr on {{date('d/m/Y') }} <br>
Page: <span class="pagenum"></span></p>
{{-- <p>Email: support#alt.hr</p> --}}
</footer>
<div class="details">
<p>Name: {{$user->name}}</p>
<p>Employee ID: {{$user->employee_id}}</p>
<p>Statement Period: {{\Carbon\Carbon::parse($fromDate)->format('d-M-Y')}} until {{\Carbon\Carbon::parse($toDate)->format('d-M-Y')}}</p>
<p>Report Type: Self</p>
</div>
#foreach($expenses as $expense)
<?php
$total_amount += $expense->total_amount;
$currency = $expense->currency ? : $expense->type->currency;
?>
#endforeach
<div class="new-section">
<div class="title">
Expense Claims Summary
</div>
<div class="details">
<p>Total Claims : {{count($expenses)}}</p>
<p>Total Claim Amount: {{$currency}} {{$total_amount}}</p>
</div>
</div>
<div class="new-section" >
<div class="title">
Transactions
</div>
<div class="details">
<table cellpadding="0" cellspacing="0" style="page-break-before : always;">
<thead>
<tr>
<th>Transaction ID</th>
#if($dateFilter == 'invoice_date')
<th>Submitted Date</th>
#elseif($dateFilter == 'submitted_at')
<th>Invoice Date</th>
#else
<th>Submitted Date</th>
<th>Invoice Date</th>
<th>Reviewed Date</th>
#endif
<th>Expense Type</th>
<th>GST Amount({{$currency}})</th>
<th>Total({{$currency}})</th>
</tr>
</thead>
<tbody>
#foreach($expenses as $expense)
<tr style="background-color: #efeff0;">
<td>{{$expense->ref_no}}</td>
#if($dateFilter == 'invoice_date')
<td>{{$expense->submitted_at ? $expense->submitted_at : ''}}</td>
#elseif($dateFilter == 'submitted_at')
<td>{{$expense->invoice_date ? $expense->invoice_date->format('d-M-Y') : ''}}</td>
#else
<td>{{$expense->submitted_at ? $expense->submitted_at : ''}}</td>
<td>{{$expense->invoice_date ? $expense->invoice_date->format('d-M-Y') : ''}}</td>
<td>{{$expense->approver->last()->pivot->updated_at->format('d-M-Y')}}</td>
#endif
<td>{{$expense->title}}</td>
{{-- <td>{{$expense->user->name}}</td> --}}
<td>{{number_format($expense->gst, 2, '.', '')}}</td>
<td>{{$expense->total_amount}}</td>
</tr>
#if($expense->mileage_amount != '0.00' || $expense->toll_amount != '0.00' || $expense->parking_amount != '0.00')
<tr class="detail-section">
<td>Description</td>
<td>{{$expense->description}}</td>
<td colspan="2"> </td>
</tr>
#endif
#if($expense->mileage_amount != '0.00')
<tr class="detail-section">
<td>Mileage Total</td>
<td>{{$currency}}{{$expense->mileage_amount}} ({{$expense->distance}}{{$expense->type->unit}})</td>
<td colspan="2"> </td>
</tr>
#endif
#if($expense->toll_amount != '0.00')
<tr class="detail-section">
<td>Toll</td>
<td>{{$currency}} {{$expense->toll_amount}}</td>
<td colspan="2"> </td>
</tr>
#endif
#if($expense->parking_amount != '0.00')
<tr class="detail-section">
<td>Parking</td>
<td>{{$currency}} {{$expense->parking_amount}}</td>
<td colspan="2"> </td>
</tr>
#endif
#if($expense->travel_id)
<tr class="detail-section">
<td>Description</td>
<td>{{$expense->travel->description}}</td>
<td colspan="2"> </td>
</tr>
<tr class="detail-section">
<td>Tagged TR</td>
<td>
#foreach($expense->travel->travel_data as $leg)
#if($leg->removed)
#continue
#endif
{{$leg->title}} <br>
#endforeach
</td>
<td colspan="2"> </td>
</tr>
#endif
#endforeach
</tbody>
</table>
</div>
</div>
</body>
</html>