kanchan
Reputation: 11
dompdf Image overlapping text pdf generating issue
I am trying to generate pdf using dom pdf
But in header part of pdf, image and text are overlapping.
Couldn't identify what exactly is wrong in my code?
CodeIgniter controller function:
$dompdf = new Dompdf();
$dompdf->set_option('enable_css_float', true);
$contxt = stream_context_create([
'ssl' => [
'verify_peer' => FALSE,
'verify_peer_name' => FALSE,
'allow_self_signed'=> TRUE
]
]);
$options = new Options();
$dompdf->setHttpContext($contxt);
$dompdf->set_option('isRemoteEnabled', true);
$dompdf->set_option('debugKeepTemp', true);
$dompdf->set_option('isHtml5ParserEnabled', true);
$dompdf->loadHtml($pdfdata);
// (Optional) Setup the paper size and orientation
$dompdf->setPaper('A4', 'portrait');
// Render the HTML as PDF
$dompdf->render();
$output = $dompdf->output();
Codeigniter View
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
<link rel="stylesheet" href="<?php echo CSS_PATH_BACKEND; ?>bootstrap.min.css">
<style>
@page { margin: 20px 30px; }
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{padding:6px;}
.table-bordered{border:2px solid #000;}
.table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th{border:2px solid #000;}
.list-inline>li{ display: inline-block;
padding-right: 35px;
padding-left: 35px;
padding-top: 10px;
font-weight: 700;}
body{font-size:13px;}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{padding:5px 0 5px 10px;}
.goods-table td{border:2px solid #000; }
thead:before, thead:after { display: none; }
tbody:before, tbody:after { display: none; }
tbody:before, tbody:after { display: none; }
.invoice tr td{}
.product_invoice td{padding:4px 5px !important;}
li{padding: 10px 0;}
li:before{content:''; font-size:60px; line-height:20px; vertical-align:middle;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<table class="table goods-table" style="margin-bottom: 0; font-size: 13px; border-collapse: collapse;">
<tbody>
<tr>
<td>
<div class="invoice-title">
<?php
$seg = $this->uri->segment(2);
if ($seg == "preview") {
?>
<img src="http://www.example.com/images/backend/logo_pdf.png" style="margin: 0 auto;display: block;" width="380px" height="76px" class="text-center" alt="logo"/>
<?php
} else {
?>
<img src="http://www.example.com/images/backend/logo_pdf.png" style="margin: 0 auto;display: block;width:380px;height:76px;" width="380px" height="76px" class="text-center" alt="logo"/>
<?php } ?>
<p style="padding: 5px 0 0 0;margin: 0;font-size: 13px;text-align: center;" class="text-center">Corporate Office: Some address</p>
<p style="padding: 0;margin: 0;font-size: 13px;text-align: center;" class="text-center">Phone: 87945456 Cell: 321456789 Email: [email protected] Website: www.example.com</p>
</div>
<div class="invoice-title">
<span class="text-center" style="margin: 5px 0 0 0;font-weight:700;text-align: center;display: block;font-size: 18px;">TAX INVOICE CUM CHALLAN</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="">
<div class="">
<div class="table-responsive">
<!--<table class="table table-condensed">-->
<table class="table goods-table" style="margin-bottom: 0; font-size: 13px; border-collapse: collapse;">
<tbody>
<tr style="border:2px solid #000;">
<td rowspan="4" style="width:40%;" colspan="2">
<!--StartFragment-->
<p style="padding: 0;margin: 0;font-size: 13px;"><span >To,</span></p>
<p style="padding: 0;margin: 0;font-weight: 700;font-size: 13px;"><span ><?php echo $customer['name']; ?></span></p>
<p style="padding: 0;margin: 0;font-size: 13px;"><span ><?php echo $customer['address']; ?></span></p>
<p style="padding: 0;margin: 0;font-size: 13px;"><span ><?php echo $customer['address1']; ?></span></p>
<p style="padding: 0;margin: 0;font-size: 13px;"><span ><?php echo $customer['city']; ?></span></p>
<p style="padding: 0;margin: 0;font-size: 13px;"><span >Phone No: <?php echo $customer['contact_no']; ?></span></p>
</td>
<td style="vertical-align:middle;width:30%;border:2px solid #000;">Invoice No: <span style="font-weight: 700;"><?php echo $invoice['invoice_no']; ?></span></td>
<td style="vertical-align:middle;width:30%;border:1px solid #000;" colspan="3" >Contact Person: <span style="font-weight: 700;"><?php echo ucwords($customer['contact_person_name']); ?></span></td>
</tr>
<tr style="border:2px solid #000;">
<td style="vertical-align:middle;">Date: <span style="font-weight: 700;"><?php echo date('d M Y', strtotime($invoice['created_date'])); ?></span></td>
<td style="vertical-align:middle;" colspan="3">Mobile No: <span style="font-weight: 700;"><?php echo ucwords($customer['contact_person_no']); ?></span></td>
</tr>
<tr style="border:2px solid #000;">
<td style="line-height: 1;vertical-align:middle;" rowspan="2">RIN No: <span style="font-weight: 700;">87455454</span></td>
</tr>
<tr style="border:2px solid #000;">
<td style="line-height: 1;vertical-align:middle;" colspan="3"> VAT No: <span style="font-weight: 700;"></span></td>
</tr>
<tr style="border:2px solid #000;">
<!--<td >Company Executive: <?php echo ucwords($user['fname'] . ' ' . $user['lname']); ?></td>-->
<td colspan="1">Date of Activation: <span style="font-weight: 700;"><?php echo date('d M Y', strtotime($invoice['activation_date'])); ?></span></td>
<td colspan="3">Next Renewal: <span style="font-weight: 700;"><?php echo date('d M Y', strtotime($invoice['renewal_date'])); ?></span></td>
</tr>
</tbody>
</table>
<table width="100%" class="table goods-table invoice" style="margin-bottom: 0; font-size: 12px; border-top: 1px solid #202020; ">
<tbody>
<tr>
<td style="font-weight: 700;font-size: 13px;width:10%;">Sr. No</td>
<td style="font-weight: 700;font-size: 13px;width:15%;">Software ID</td>
<td style="font-weight: 700;font-size: 13px;width:35%;">Description</td>
<td style="font-weight: 700;font-size: 13px;width:10%;">Quantity</td>
<td style="font-weight: 700;font-size: 13px;width:15%;">Unit Price (<img src="https://i.sstatic.net/nGbfO.png" width="8" height="10">)</td>
<td style="font-weight: 700;font-size: 13px;width:15%" colspan="2">Total Price (<img src="https://i.sstatic.net/nGbfO.png" width="8" height="10">)</td>
</tr>
<?php
$cnt = 1;
foreach ($product_invoice as $key => $value) {
?> <tr <?php
if (count($product_invoice) < 9) {
echo 'class';
} else {
echo 'class="product_invoice"';
}
?>>
<td
<?php if (count($product_invoice) == 1) { ?> style="height:650px;"<?php } ?>
<?php if (count($product_invoice) == 2 && ($key == (count($product_invoice)) - 1)) { ?> style="height:590px;"<?php } ?>
<?php if (count($product_invoice) == 3 && ($key == (count($product_invoice)) - 1)) { ?> style="height:180px;"<?php } ?>
<?php if (count($product_invoice) == 4 && ($key == (count($product_invoice)) - 1)) { ?> style="height:160px;"<?php } ?>
<?php if (count($product_invoice) == 5 && ($key == (count($product_invoice)) - 1)) { ?> style="height:110px;"<?php } ?>
<?php if (count($product_invoice) == 6 && ($key == (count($product_invoice)) - 1)) { ?> style="height:50px;"<?php } ?>
<?php if (count($product_invoice) == 7 && ($key == (count($product_invoice)) - 1)) { ?> style="height:0px;"<?php } ?>
<?php if (count($product_invoice) == 8 && ($key == (count($product_invoice)) - 1)) { ?> style="height:0px;"<?php } ?>
<?php if (count($product_invoice) == 9 && ($key == (count($product_invoice)) - 1)) { ?> style="height:0px;"<?php } ?>
<?php if (count($product_invoice) == 10 && ($key == (count($product_invoice)) - 1)) { ?> style="height:0px;"<?php } ?>>
<?php echo $cnt++; ?></td>
<td><?php echo $value['software_id']; ?></td>
<td><?php echo $value['description']; ?></td>
<td><?php echo $value['qty']; ?></td>
<td colspan="2"><?php echo $value['unit_price']; ?></td>
<td><?php echo $value['total_price']; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
<table width="100%" class="table goods-table" style="margin-bottom: 0; font-size: 13px; padding: 15px 5px; ">
<tbody>
<tr>
<td colspan="2" rowspan="6" style="font-weight: 700;width:70%; padding: 10px 15px;">
<span style="font-weight:700;">Comments: </span>
</td>
<td style="width:15%;height:10px;">Sub Total</td>
<td style="width:25%;height:10px;" colspan="2"><img src="https://i.sstatic.net/nGbfO.png" width="8" height="10"> <?php echo $invoice['sub_total']; ?></td>
</tr>
<tr>
<td style="height:10px;">Other</td>
<td style="height:10px;"colspan="2"><img src="https://i.sstatic.net/nGbfO.png" width="8" height="10"> <?php echo $invoice['other']; ?></td>
</tr>
<tr>
<td style="height:10px;">VAT</td>
<td style="height:10px;" colspan="2"><img src="https://i.sstatic.net/nGbfO.png" width="8" height="10"> <?php echo $invoice['vat']; ?></td>
</tr>
<tr >
<td style="font-weight: 700;height:10px;font-size: 14px;">Grand Total</td>
<td style="font-weight: 700;height:10px;" colspan="2"><img src="https://i.sstatic.net/nGbfO.png" width="8" height="10"> <?php echo $invoice['total_price']; ?></td>
</tr>
<tr>
<td style="height:10px;">Mode Of Payment</td>
<td style="height:10px;" colspan="2"><?php
if ($invoice['paymode_mode'] == 1) {
echo 'Cash';
}
if ($invoice['paymode_mode'] == 2) {
echo 'Cheque';
}
if ($invoice['paymode_mode'] == 3) {
echo 'Cash and Cheque';
}
?></td>
</tr>
<tr>
<td colspan="3" >In Words: <?php echo ucwords(convert_number_to_words($invoice['total_price'])); ?> Rupees Only</td>
</tr>
<tr>
<td colspan="2">Installation Done<br>
<br><br><br>
Receiver's Signature with Seal
</td>
<td style="text-align: center;" colspan="3"><span style="font-weight: 700;font-size: 14px;">For </span><span style="font-weight: 700;font-size: 14px;">oft</span>
<?php if ($seg == "preview") {
?>
<img src="<?php echo IMAGE_PATH_BACKEND; ?>test.png" style="margin: 0 auto;display: block;" class="text-center" alt="logo"/>
<?php
} else {
?>
<img src="http://example.com/images/backend/test.png" style="margin: 0 auto;display: block;" class="text-center" alt="logo"/>
<?php } ?>
Authorized Signatory
</td>
</tr>
</tbody>
</table>
<table width="100%" class="table " style="margin-bottom: 0; font-size: 13px; border-bottom: 2px solid #000; border-left: 2px solid #000; border-right: 2px solid #000;">
<tbody>
<tr>
<td style="border-right: 2px solid #000;font-weight: 700;width: 100px;">Branches</td>
<td style="border-right: 2px solid #000;font-weight: 700;text-align: center;width: 100px;">sddsa</td>
<td style="border-right: 2px solid #000;font-weight: 700;text-align: center;width: 100px;">ewew</td>
<td style="border-right: 2px solid #000;font-weight: 700;text-align: center;width: 132px;">ewewq</td>
</tr>
<tr>
<td colspan="5" style="border : 2px solid #000;text-align: center;"><span style="font-weight:700;font-size: 13px;">Note: Computer generated Invoice and requires no signature.</span><br></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Upvotes: 1
Views: 4448
Answers (1)
BrianS
Reputation: 13914
There's a bug in Dompdf (current release 0.8.0) where styling an image with auto margins will cause it to no longer take up any vertical space in the layout.
Luckily your layout is such that working around the issue is fairly simple. Change the code around your image to the following:
<div class="text-center">
<?php
$seg = $this->uri->segment(2);
if ($seg == "preview") {
?>
<img src="http://www.example.com/images/backend/logo_pdf.png" width="380px" height="76px" alt="logo"/>
<?php
} else {
?>
<img src="http://www.example.com/images/backend/logo_pdf.png" width="380px" height="76px" class="text-center" alt="logo"/>
<?php } ?>
</div>
Also of note: don't modify the display styling of images. Currently dompdf requires a special styling to render these correctly and if you change the styling (e.g. to display: block;) you may get unexpected results.
Upvotes: 5
Related Questions
- Dompdf image position incorrect
- Dompdf overlapping the images
- dompdf image not real image not readable or empty
- dompdf creates defective pdf on wordpress
- DOMPDF displaying pictures, but wrong
- TCPDF Text overlaps image
- Dompdf output contains weird borders
- dompdf image overflow issue
- (PHP) Are overlapping images possible in PDFs generated by TCPDF or domPDF?
- Image issue inside PDF loop