如何在mpdf中设置表的高度
I am generating invoices using MPDF. My item rows are dynamic so the height of table which shows items should be flexible. When I am printing the PDF using following code:
<!-- Latest compiled and minified CSS -->
<?php echo $this->Html->css(array('bootstrap.min','AdminLTE.min','skin-green','font-awesome.min')); ?>
<style type="text/css">
.products{
width: 100%;
border-collapse: collapse;
}
h2,h3{
margin: 0;
padding:0;
}
.border{
border: 1px solid black;
padding:5px;
}
table.products{
border: 1px solid black;
height: 500px;
margin-left: -6px;
margin-right: -6px;
margin-bottom: -6px;
}
.products tr td{
padding:5px;
border:1px solid #333;
}
.products tr th{
padding:5px;
border:1px solid #333;
}
.pull-right{
float: right;
}
</style>
<!-- title row -->
<div class="border">
<table width="100%">
<tr>
<td style="width:35%">
</td>
<td style="width:35%" align="center">
Estimate
</td>
<td style="width:35%" align="right">
Date: <?php echo date('d-m-Y',strtotime($invoice['Invoice']['dated'])); ?>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<br>
<h3>Invoice Heading</h3>
</td>
</tr>
</table>
<hr/>
<div class="row">
<div class="col-xs-12 border-right">
To: <?php echo $invoice['Invoice']['user']; ?><br>
Mobile.: <?php echo $invoice['Invoice']['mobile']; ?><br>
Address: <?php echo $invoice['Invoice']['address']; ?><br>
</div>
</div>
<hr/>
<!-- Table row -->
<div class="row">
<div class="col-xs-12 table-responsive">
<table class="products">
<thead>
<tr>
<th width="60"><?php echo __('Sr. No.'); ?></th>
<th><?php echo __('Quantity'); ?></th>
<th width="250"><?php echo __('Particulars'); ?></th>
<th><?php echo __('Rate'); ?></th>
<th><?php echo __('Amount'); ?></th>
</tr>
</thead>
<tbody>
<?php $i = 0; foreach ($invoice['InvoiceDetail'] as $invoiceDetail): $i++; ?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo $invoiceDetail['quantity']; ?></td>
<td><?php echo $invoiceDetail['Item']['name']; ?></td>
<td><?php echo $invoiceDetail['price']; ?></td>
<td align="right"><?php echo $invoiceDetail['amount'] ?></td>
</tr>
<?php endforeach; ?>
<tr>
<td colspan="3"></td>
<td>Total: </td>
<td align="right"><i class="fa fa-inr"></i> <?php echo number_format((float)$invoice['Invoice']['total'], 2, '.', ''); ?>
</td>
</tr>
<tr>
<td colspan="5">Amount in words: Rs.<?php echo $c2w ?></td>
</tr>
</tbody>
</table>
</div><!-- /.col -->
</div><!-- /.row -->
</div>
It prints the pdf as follows: 
But I need to print it as follows:
I have tried using line-height but it distorts the view because valign in td will not align the content at top.
With line-height:100px in TD print looks like follows:
Is there a way to fill the complete page by increasing the height of items table dynamically.
As @jecorrales asked how I solved my problem.
I have printed the invoice using simple window.print() but setting it using css as follows:
<style type="text/css">
@page {
size: 21cm 29.7cm;
margin: 0; /* change the margins as you want them to be. */
}
body
{
/* this affects the margin on the content before sending to printer */
margin: 0px;
}
.row1{
margin-right: -12px;
margin-left: 0px;
}
.products{
width: 100%;
border-collapse: collapse;
}
h2,h3,h4,h5{
margin: 0;
padding:0;
}
hr{
margin-bottom: 5px;
margin-top: 5px;
}
.border{
border: 1px solid black;
padding:5px;
}
table.products{
border: 1px solid black;
margin-left: -6px;
margin-right: -6px;
margin-bottom: -6px;
}
.products tr td{
padding:3px;
border:1px solid #333;
}
.products tr th{
padding:3px;
border:1px solid #333;
}
.pull-right{
float: right;
}
.no-margin{
margin: 0;
}
.no-b{
border-top:0px !important;
border-bottom: 0px !important;
}
.logo{
position: absolute;
width: 90px;
left: 20px;
top: 50px;
}
</style>
<!-- title row -->
<div class="col-md-12 border no-margin">
<table class="col-md-12">
<tr>
<td style="width: 400px;" valign="top">
TIN No. 00000000000000 Dated: 01-04-2005<br>
C.S.T. No. 0000000000 Dated: 11-06-2001
</td>
<td style="width: 400px;" align="center" valign="top">
<u>Retail Invoice</u>
</td>
<td style="width: 400px;" align="right" valign="top">
Mobile: 00000000000<br>
Phone: 0000000000000<br>
Tele Fax: 00000000000000<br>
Email: email
</td>
</tr>
<tr>
<td colspan="3" align="center">
<img class="logo" src="../../images/logo.jpg">
<br>
<h3>Company Name</h3>
<h4>Deals in: Products</h4>
<h5>Address here</h5>
</td>
</tr>
</table>
<hr>
<br>
<div class="row">
<div class="col-xs-7 border-right">
To: <?php echo $invoice['Invoice']['user']; ?><br>
Address: <?php echo $invoice['Invoice']['address']; ?><br>
Registration No.: <?php echo $invoice['Invoice']['reg_no']; ?><br>
</div>
<div class="col-xs-5">
Bill No. <?php echo $invoice['Invoice']['id']; ?><br>
Dated: <?php echo date('d-m-Y',strtotime($invoice['Invoice']['dated'])); ?><br>
</div>
</div>
<hr>
<table style="width: 100%">
<tr>
<td>Name & Address of Transport Co. </td><td><?php echo $invoice['Invoice']['transport']; ?></td>
</tr>
<tr>
<td>GRR: <?php echo $invoice['Invoice']['grr']; ?></td>
<td>Vehicle No.</td><td><?php $invoice['Invoice']['vehicle_no']; ?></td>
</tr>
</table>
<hr>
<!-- Table row -->
<div class="row1">
<table class="products">
<thead>
<tr height="20">
<th width="60"><?php echo __('Sr. No.'); ?></th>
<th><?php echo __('Particulars'); ?></th>
<th width="80"><?php echo __('Quantity'); ?></th>
<th width="80"><?php echo __('Price'); ?></th>
<th width="80"><?php echo __('Amount'); ?></th>
<th width="80"><?php echo __('Tax'); ?></th>
<th width="80"><?php echo __('Unit'); ?></th>
<th width="80"><?php echo __('Item Total'); ?></th>
</tr>
</thead>
<tbody>
<?php $i = 0; foreach ($invoice['InvoiceDetail'] as $invoiceDetail): $i++; ?>
<tr height="20">
<td><?php echo $i; ?></td>
<td><?php echo $invoiceDetail['Item']['name']; ?></td>
<td><?php echo $invoiceDetail['quantity']; ?></td>
<td><?php echo $invoiceDetail['price']; ?></td>
<td><?php echo $invoiceDetail['amount']; ?></td>
<td><?php echo $invoiceDetail['tax']; ?></td>
<td><?php echo $invoiceDetail['unit']; ?></td>
<td align="right"><?php echo $invoiceDetail['item_total'] ?></td>
</tr>
<?php endforeach; ?>
<?php for ($i=count($invoice['InvoiceDetail']); $i <=16 ; $i++) { ?>
<tr class="no-b" height="26">
<td class="no-b"></td>
<td class="no-b"></td>
<td class="no-b"></td>
<td class="no-b"></td>
<td class="no-b"></td>
<td class="no-b"></td>
<td class="no-b"></td>
<td class="no-b"></td>
</tr>
<?php } ?>
<tr height="20">
<td id="getrow" colspan="6" rowspan="4" align="top">
Amount in words: Rs.<?php echo $c2w ?></td>
<td height="30">Total: </td>
<td align="right"><i class="fa fa-inr"></i> <?php echo number_format((float)$invoice['Invoice']['subtotal'], 2, '.', ''); ?>
</td>
</tr>
<tr id="dynTable" height="20">
<td>Adjustment:</td>
<td align="right"><i class="fa fa-inr"></i> <?php echo $invoice['Invoice']['adjustment']; ?></td>
</tr>
<tr height="20">
<td>Grand Total:</td>
<td align="right"><i class="fa fa-inr"></i> <?php echo number_format((float)round($invoice['Invoice']['total']), 2, '.', ''); ?></td>
</tr>
<tr height="20">
<td colspan="8">
<h5>I AM LIABLE TO PAY TAX ON THE VALUE ABOVE AND AUTHORISED TO SIGN THE INVOICE</h5>
</td>
</tr>
<tr>
<td style="height: 20px;" valign="top" colspan="6">
<ol>
<li>Goods once sold cannot be taken back.</li>
<li>Subject to Malerkolta Jurisdiction only.</li>
<li>All bills standing unpaid after 15 days from presentation an interest will be charged @ 24%</li>
</ol>
E.&.O.E.
</td>
<td valign="top" colspan="2" align="right">
For Company Name
<br><br><br>
Auth. Signatory
</td>
</tr>
</tbody>
</table>
</div><!-- /.row -->
</div>
In it $invoice is containing array of data.
And I am defining static no. of rows which can be supported by single A4 page. And using this solution for more than 2 years for this situation.
See final result https://screenshots.firefox.com/GRMfejUAEVjyiVpb/localhost
I was searching for mpdf line-height and found this unanswered question.
Here's a few solutions I've used.
Option 1
- Count each row during the loop
- Estimate the approximate height of each row. Normally this is fixed to a single line so it's not an issue.
- Deduct (rows x height) from the required height of table
- During the loop, if row number is equal to the total rows then it's the last row in which case you can add
<td height="##">for the last row
Option 2
Add filler rows
- Figure how many rows you need on the invoice to fill the right amount (keep it less than maximum)
Then use something like the following fill up the table afterwards
if($current_row < $total_rows){ for($i=$current_row; $i<$total_rows; $i++){ echo '<tr><td colspan="4"></td></tr>'; } }?>
You have to specify it inside the cell like bellow:
<td style="height:4.6cm; vertical-align: text-top;"></td>
Here's a few solutions I've used. 1) Count all tr in tbody 2) Then find last tr of that tbody using css set line-height of td
According to the documentation of mPDF library here, we can set the height of block level elements only. I was facing the same problem, then I moved my table inside a div and added height to the div like below.
<div height="870" style="border:solid 1px #ccc">
<table class="table>
Your table content here...
</table>
</div>