I am having a php table which contains information about billing of certain numbers. After generating this table I export it in pdf using mpdf.
If the table has a certain number of rows it breaks the page in a weird way, leading the headers repeat on the next page with no rows.
Here is the format of the table:
The table contains up to 3 headers inside <thead> tags, like this:
<table class="items" width="100%" style="font-size: 9pt; border-collapse: collapse;" cellpadding="8">
<thead>
<tr>
<td width="30.3%">Forbrug</td>
<td width="23.1%">Periode</td>
<td width="10.76%">Tid/MB</td>
<td width="9.28%">Enheder</td>
<td width="12.9%" align="right">I alt</td>
<td width="13.3%" align="right">I alt+<b>moms</b></td>
</tr>
</thead>
rows are added in a while from the database in this way.. nothing special
<tr>
<td>'.$produktNameFromDatabase.'</td>
<td>'.$periodeFromDatabase.'</td>
<td>'.$tidMbFromDatabase.'</td>
<td>'.$enhederFromDatabase.'</td>
<td align="right">'.number_format((float)$produktpris, 2, ',', '.').' kr.</td>
<td align="right"><b>'.number_format((float)$produktpris*(1 + (0.25 * $moms)) - $momsDiscount, 2, ',', '.').' kr.</b></td>
</tr>
with the total lines at the end
<tr>
<td class="blanktotal" colspan="1" rowspan="6"></td>
<td class="blanktotal" colspan="1" rowspan="6"></td>
<td class="totals" colspan="2">Subtotal:</td>
<td class="totals" colspan="2">'.number_format((float)$pris1, 2, ',', '.').' kr.</td>
</tr>
<tr>
<td class="totals1" colspan="2">Moms:</td>
<td class="totals1" colspan="2">'.number_format((float)$pris1*(0.25 * $moms) - $momsTotal, 2, ',', '.').' kr.</td>
</tr>
<tr>
<td class="totals1" colspan="2"><b>TOTAL:</b></td>
<td class="totals1" colspan="2"><b>'.number_format((float)$pris1*(1 + (0.25 * $moms)) - $momsTotal, 2, ',', '.').' kr.</b></td>
</tr>
</tbody>
</table>
!!! EVERYTHING that you have seen by now, including the totals are a part of the table!
Here is the mpdf settings that I have:
In PhP:
$mpdf=new mPDF('win-1252','A4','','',20,15,48,25,10,10);
$mpdf->useOnlyCoreFonts = true; // false is default
$mpdf->SetProtection(array('print'));
$mpdf->SetTitle("Suggestive Title");
$mpdf->SetAuthor("Author");
$mpdf->SetWatermarkText("Faktura");
$mpdf->showWatermarkText = true;
$mpdf->watermark_font = 'DejaVuSansCondensed';
$mpdf->watermarkTextAlpha = 0.1;
$mpdf->SetDisplayMode('fullpage');
In HTML:
$html .= '<!--mpdf
<htmlpageheader name="myheader">
<table width="100%"><tr>
<td width="50%" style="color:#000000;">
<span style="font-weight: bold; font-size: 14pt;">
Company Name
</span>
Company Information
</td>
<td width="50%" style="text-align: right;">
<img src="image.jpg" />
Invoice Information <br />Side: {PAGENO} af {nb}
</td>
</tr></table>
</htmlpageheader>
<htmlpagefooter name="myfooter">
<div style="border-top: 1px solid #000000; font-size: 9pt; text-align: center; padding-top: 3mm; ">
Footer Stuff
</div>
<div style="font-size: 9pt; text-align: center;">
Other Footer Stuff
</div>
</htmlpagefooter>
<sethtmlpageheader name="myheader" value="on" show-this-page="1" />
<sethtmlpagefooter name="myfooter" value="on" />
mpdf-->';
Some styling that I use
body {font-family: sans-serif;
font-size: 10pt;
}
p { margin: 0pt;
}
td { vertical-align: top; }
.items td {
border-left: 0.1mm solid #000000;
border-right: 0.1mm solid #000000;
}
table thead td { background-color: #d4ffaa;
border: 0.1mm solid #000000;
}
.items td.blanktotal {
background-color: #FFFFFF;
border: 0mm none #000000;
border-top: 0.1mm solid #000000;
border-right: 0.0mm solid #000000;
}
.items td.totals {
text-align: right;
border-top: 0.1mm solid #000000;
border-right: 0.0mm solid #000000;
border-left: 0.0mm solid #000000;
}
.items td.totals1 {
text-align: right;
border-top: 0.0mm solid #000000;
border-right: 0.0mm solid #000000;
border-left: 0.0mm solid #000000;
}
The result looks something like this:
This issue occurs only when the number of rows fills the page. If it overflows it is no major issue, because the table headers are still there on the next page (all of them unfortunately, not only the last one) and the rest of the rows are added further.
How can I get rid of those empty rows, in this special case?
Thank you!
!!EDIT: Added more information, code and a better image of the case. Sorry for not doing it at the first time!
!!EDIT #2: I just observed on other examples that had more than 1 page of rows that the <thead>s keep their position on next pages. It happens all the time. Is there a way to disable that so that other <thead>s will just continue on the next page from the top of the page without remembering the position from the previous page?
You need to set headers (and footers) in individual strings, like this:
require_once __DIR__ . '/../vendor/autoload.php';
$stylesheet = '
.table-header{
border: none;
background-color: yellow;
width: 100%;
}
.table-header td{
border-right: 1px solid;
}
.table-body{
border: none;
background-color: transparent;
width: 100%;
}
.table-body td{
border-right: 1px solid;
border-bottom: 1px solid;
}
.table-footer{
border: none;
background-color: transparent;
width: 100%;
}
.table-footer .td-number{
text-align: right;
}
';
/* Sample data */
$html = '<table class="table-body">';
for ($i = 1; $i <= 100; $i++) {
$html.='<tr>
<td width="30.3%">Forbrug '.$i.'</td>
<td width="23.1%">Periode '.$i.'</td>
<td width="10.76%">'.$i.' MB</td>
<td width="9.28%">Val '.$i.'</td>
<td width="12.9%" align="right">I alt '.$i.'</td>
<td width="13.3%" align="right"><b>moms</b> '.$i.'</td>
</tr>';
}
$html.= '</table>';
$header = '<table class="table-header"><tr>
<td width="30.3%">Forbrug</td>
<td width="23.1%">Periode</td>
<td width="10.76%">Tid/MB</td>
<td width="9.28%">Enheder</td>
<td width="12.9%" align="right">I alt</td>
<td width="13.3%" align="right">I alt+<b>moms</b></td>
</tr></table>';
$footer = '<table class="table-footer"><tr>
<td>Footer here</td>
<td class="td-number"><b>Page N. {PAGENO}</b></td>
</tr></table>';
$mpdf = new mPDF('c','A4','','',15,15,18,15,10,5);
$mpdf->mirrorMargins = 1;
/* Declare headers */
$mpdf->SetHTMLHeader($header);
$mpdf->SetHTMLHeader($header,'E');
/* Declare footers */
$mpdf->SetHTMLFooter($footer);
$mpdf->SetHTMLFooter($footer,'E');
$mpdf->WriteHTML($stylesheet,1);
$mpdf->WriteHTML($html);
$mpdf->Output();
I eventually found a solution. Best way to get rid of these things is to replace <thead> tags with <th>. <thead> has a predefined style which makes the table header repeat itself on every page. <th> will make the header stop repeating itself on the next pages (fortunate or unfortunate), but it will eliminate the space caused by the <thead>'s style
Related
I'm trying to create a PDF file via mPDF where the page continues. However, the second page write over the first
Code:
require_once ('../database/conection.php');
$db->query("SET NAMES 'utf8'");
$db->query("SET character_set_connection=utf8");
$db->query("SET character_set_client=utf8");
$db->query("SET character_set_results=utf8");
$sql = $db->query("SELECT * FROM movconsumo");
require_once __DIR__ . '/../vendor\autoload.php';
$mpdf = new \Mpdf\Mpdf();
$data = '';
while ($row = $sql->fetch(PDO::FETCH_ASSOC)) {
$data .= "<tr style='border: 1px solid black; border-collapse: collapse;'> <td style='border: 1px solid black; border-collapse: collapse;'>".$row['datamov']."</td>";
$data .= "<td style='border: 1px solid black; border-collapse: collapse;'>".$row['nomeitem']."</td>";
$data .= "<td style='border: 1px solid black; border-collapse: collapse;'><center>".$row['quantmov']."</center></td>";
$data .= "<td style='border: 1px solid black; border-collapse: collapse;'>".$row['destinomov']."</td>";
$data .= "<td style='border: 1px solid black; border-collapse: collapse;'>".$row['histmov'].'</td></tr>';
}
$mpdf->SetHTMLHeader('
<table width="100%" style="vertical-align: bottom; font-family: serif; font-size: 14pt; color: #000000; font-weight: bold; border-bottom:0.5mm solid #220044;">
<tr>
<td width="50%"><span style="font-weight: bold;">RELATÓRIO ITENS MOVIMENTADOS</span></td>
<td width="45%" style="text-align: right;"><span style="font-size: 9pt;">teste<br /></span></td>
<td width="5%" style="text-align: right;"><img src="../images/teste.png" width="100" height="105" /></td>
</tr>
</table><br><center>
<table style="border: 1px solid black; border-collapse: collapse; ">
<tr style="border: 1px solid black; border-collapse: collapse; ">
<th>DATA</th>
<th>NOME</th>
<th>QUANTIDADE</th>
<th>DESTINO</th>
<th>HISTÓRICO</th>
</tr>
'.$data."</table></center>");
//#--> page
$mpdf->SetDisplayMode('fullpage');
$mpdf->list_indent_first_level = 0; // 1 or 0 - whether to indent the first level of a list
$mpdf->AddPage('L'); // Adds a new page in Landscape orientation L/P
//
$dia = date('d/m/y');
//#--> footer
$mpdf->SetHTMLFooter('
<table width="100%" style="vertical-align: bottom; font-family: serif; font-size: 8pt; color: #000000; font-weight: bold; font-style: italic;">
<tr>
<td width="33%"><span style="font-weight: bold; font-style: italic;">'.$dia.'</span></td>
<td width="33%" align="center" style="font-weight: bold; font-style: italic;">{PAGENO}/{nbpg}</td>
<td width="33%" style="text-align: right; ">Teste</td>
</tr>
</table>
');
$mpdf->Output();
I tried every way to keep the text going, however, it keeps writing on the first page.
I am using mpdf 8.1 with yii2 and PHP version is 7.4 for PDF report download. It's works fine in local environment. But the text keeps writing on the first page.
hi I am using dompdf for generating pdf from HTML but not able to understand why it gets break while printing the pdf
here is my function
public function printRunsheetBymanifestAction()
{
$manifestId = $this->params()->fromRoute('id', 0);
$getDetails = $this->getDeliveryTable()->getRunSheetData(array('manifestId' => base64_decode($manifestId)));
$getItemDetails = $this->getManifestTable()->getManifestItemsById($getDetails[0]['manifestId']);
$options = new Options();
$options->set('isRemoteEnabled', true);
$options->set('defaultFont','Courier');
$options->set('defaultPaperSize','A4');
$domPdf = new \Dompdf\Dompdf($options);
$domPdf->set_option('isHtml5ParserEnabled', true);
$view = $this->getServiceLocator()->get('ViewRenderer');
$viewModel = new ViewModel();
$viewModel->setTemplate('delivery/index/print-runsheet-bymanifest.phtml');
$viewModel->setVariable('results', $getDetails);
$viewModel->setVariable('itemDetails', $getItemDetails);
$content = $view->render($viewModel); //make html content for loadn in doampdf
$domPdf->loadHtml($content);
$domPdf->render();
$fileName = $getDetails[0]['runsheetNumber'].'_'.date('d_m_Y');
$domPdf->stream($fileName,array("Attachment"=>1));
exit;
}
here is my phtml template even I try the page break CSS for break the page after desired output
<?php $results = $this->results;
$items = $this->itemDetails;
?>
<style>
table.body {
width: 100%;
margin: 0 auto;
}
td.text-right{text-align: right;}
td.text-center{text-align: center;}
.page_breack{
clear: both;
page-break-after: always;
}
</style>
<table class="body" align="center" style="border-top: 1px solid #333; border-left: 1px solid #333; border-right: 1px solid #333;">
<tr>
<td>
<div id="header">
<table style="width: 100%; border-collapse: collapse;">
<tr>
<td style="width: 30%">
<img style="width: 250px" src="<?=$this->basePath();?>/manifests/generate-barcode/<?php echo $results[0]['runsheetNumber']; ?>">
</td>
<td style="width: 70%">
<table class="row" style="width: 100%">
<tr>
<td >Location: <?php echo $results[0]['branchName']; ?></td>
</tr>
<tr>
<td >Website: www.xfas.in</td>
</tr>
<tr>
<td >
Daily Runsheet for : <?php echo $results[0]['allocated'.$results[0]['allocatedTo'].'Code'].' - '.$results[0]['allocated'.$results[0]['allocatedTo'].'Name']; ?>
</td>
</tr>
<tr>
<td class="text-right">
<strong>Printed # : <?php echo date('d.m.Y'); ?></strong>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<table width="100%" style="border-collapse: collapse;">
<tr>
<th style="border-bottom: 2px dashed #333; border-top:2px dashed #333; text-align: center; height: 15px; ">SNo.</th>
<th style="border-bottom: 2px dashed #333; border-top:2px dashed #333; text-align: center; height: 15px; ">AwbNo.</th>
<th style="border-bottom: 2px dashed #333; border-top:2px dashed #333; text-align: center; height: 15px; ">Consignee Details</th>
<th style="border-bottom: 2px dashed #333; border-top:2px dashed #333; text-align: center; height: 15px; ">Pin Code</th>
<th style="border-bottom: 2px dashed #333; border-top:2px dashed #333; text-align: center; height: 15px; ">Signature</th>
</tr>
<?php if(count($items) > 0):
foreach ($items as $key => $val):
// $key = $key +1;
?>
<tr class="<?php
++$key;
if($key%14 == 0 && $key !=0)
echo "page_breack";
//echo ++$key; ?>" ><td style="font-size: 12px; text-align:center; height: 65px; border-bottom: 1px solid #333; border-top:1px solid #333; border-collapse: collapse;"><?php echo $key; ?></td>
<td style="font-size: 12px; text-align:center; height: 65px; border-bottom: 1px solid #333; border-top:1px solid #333; border-collapse: collapse;"><?php echo $val['Awb']; ?></td>
<td style="font-size: 12px; text-align:center; height: 65px; border-bottom: 1px solid #333; border-top:1px solid #333; border-collapse: collapse;"><strong><?php echo $val['Consignee']; ?></strong><br>
<?php echo $val['Address'].', '.$val['Place'].', '.$val['ConsigneeArea']; ?>
</td>
<td style="font-size: 12px; text-align:center; height: 65px; border-bottom: 1px solid #333; border-top:1px solid #333; border-collapse: collapse;"><?php echo $val['PinCode']; ?></td>
<td style="font-size: 12px; text-align:center; height: 65px; border-bottom: 1px solid #333; border-top:1px solid #333; border-collapse: collapse;"></td>
</tr>
<?php endforeach; ?>
<?php
$ramainRow = count($items)%14;
if($ramainRow >0){
// $cnt = 14 - count($items);
for ($i =0; $i < $ramainRow; $i++){?>
<tr>
<td colspan="5" style="font-size: 12px; text-align:center; height: 65px; border-bottom: 1px solid #333; border-top:1px solid #333; border-collapse: collapse;"></td>
</tr>
<?php } ?>
<tr>
<td colspan="5" style="font-size: 12px; text-align:center; height: 53px; border-bottom: 1px solid #333; border-top:1px solid #333; border-collapse: collapse;">
<strong>Receiver Name:</strong> <?php echo $results[0]['allocated'.$results[0]['allocatedTo'].'Code'].' - '.$results[0]['allocated'.$results[0]['allocatedTo'].'Name']; ?><br>
<strong>Signature:</strong>
</td>
</tr>
<?php }?>
<?php endif;?>
</table>
</td>
</tr>
above is the htm fiel file for better understanding i am givig the pdf fil
This code works prefect on browsers but problem is that when i fill dynamic data and generating PDF using dompdf then <td>item</td> full column goes top on cell.
What is the solution ?
Browsers shows like this Browsers View but Generated PDF by dom pdf shows like this Generated PDF View
body {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
#header { position: fixed; left: 0px; width:100%; bottom: -150px; right: 0px; height: 150px; background-color: #4b94d9; color:#000; text-align: left; }
#page-wrap {
width: 700px;
margin: 0 auto;
}
.center-justified {
text-align: justify;
margin: 0 auto;
width: 30em;
}
table.outline-table {
border: 1px solid;
border-spacing: 0;
}
tr.border-bottom td, td.border-bottom {
border-bottom: 1px solid;
}
tr.border-top td, td.border-top {
border-top: 1px solid;
}
tr.border-right td, td.border-right {
border-right: 1px solid;
}
tr.border-right td:last-child {
border-right: 0px;
}
tr.center td.center {
text-align: center;
valign:"middle";
}
td.pad-left {
padding-left: 5px;
line-height: 2;
}
tr.right-center td, td.right-center {
text-align: right;
padding-right: 50px;
}
tr.right td, td.right {
text-align: right;
}
.content > div > span{
display:inline-block;
width:50%; /* or choose some other value */
}
.contentdate > div > span{
display:inline-block;
width:35%; /* or choose some other value */
}
<table width="100%" class="outline-table">
<tbody>
<tr class="border-bottom border-right" style="background:#353940;color:#FFF;">
<td width="35%" class="pad-left"><strong>Item</strong></td>
<td width="10%" style="text-align:center;"><strong>Quantity</strong></td>
<td width="10%" class="right"><strong>Unit Cost</strong></td>
<td width="15%" class="right"><strong>Total</strong></td>
</tr>
<tr class="border-right">
<td class="pad-left">some item name one</td>
<td style="text-align:center;">15</td>
<td class="right">1500.00</td>
<td class="right">22500.00</td>
</tr>
</tbody>
</table>
This code works prefect on browsers but problem is that when i fill dynamic data and generating PDF using dompdf then <td>item</td> full column goes top on cell.
What is the solution ?
Try This.
td.pad-left {
padding-left: 5px;
//line-height: 2; <--remove this
}
Html
<tr class="border-right">
<!-- give margin top in particular line -->
<td class="pad-left"><p style="margin-top:10px;">some item name one</p></td>
<td style="text-align:center;">15</td>
<td class="right">1500.00</td>
<td class="right">22500.00</td>
</tr>
In my table I am trying to change the font size. I have tried adding font size in the tag, adding it in the CSS code for the Myposts class, but nothing prevailed. How can I change the font size?
<table width="100%" border="0" class = "Myposts"; align="center" cellpadding="3" cellspacing="1" bgcolor="#686868 " >
<tr>
<td width="6%" align="center" bgcolor="#505050 " ><strong>#</strong></td>
<td width="53%" align="center" bgcolor="#505050 "><strong>Job Description</strong></td>
<td width="15%" align="center" bgcolor="#505050 "><strong>Views</strong></td>
<td width="13%" align="center" bgcolor="#505050 "><strong>Replies</strong></td>
<td width="13%" align="center" bgcolor="#505050 "><strong>Date/Time</strong></td>
</tr>
you can select table cells in CSS
table.Myposts tr td {
font-size: 18px;
}
.Myposts td {
font-size: 20px;
}
example in jsfiddle: http://jsfiddle.net/Wk28Y/
Please don't consider this an answer, just a different way of thinking about the issue. FIDDLE
You could get rid of the "bold" line by making the first row <th> instead of <td>.
Add the css table styling to your Myposts class.
You note in the title that it is php, but I don't see any php tags. So I assume you're passing php to an html page, thus the css styling would still work for you.
HTML
<table class = "Myposts">
<tr>
<td>#</td>
<td>Job Description</td>
<td>Views</td>
<td>Replies</td>
<td>Date/Time</td>
</tr>
</table>
CSS
table {
width: 100%;
border: 0px solid black;
background-color: #686868;
border-spacing: 1px;
}
table td {
background-color: #505050;
color: white;
text-align: center;
font-weight: bold;
padding: 3px;
font-size: 20px;
}
table tr td:nth-child(1) {
width: 6%;
}
table tr td:nth-child(2) {
width: 53%;
}
table tr td:nth-child(3) {
width: 15%;
}
table tr td:nth-child(4) {
width: 13%;
}
table tr td:nth-child(5) {
width: 13%;
}
I am using PHP to send mail of a webpage content. I have a table in the page.
My table does not show row and column borders in email sent using PHP mail.
It does not read the CSS in email.
This is my code:
<div id="table_email" style="width:800px;margin-left:50px; text-align: left;">
<table class="table1">
<tr>
<th>Description</th>
<th colspan="2">Amount</th>
</tr>
<tr>
<td>(A)Package Cost</td>
<td>';$formatedMessag .= $inv[0].'</td>
</tr>
<tr>
<td>(B) Insurance </td>
<td>';$formatedMessag .= $inv[1].'</td>
</tr>
<tr>
<td>(C)Flight / Train</td>
<td>';$formatedMessag .= $inv[2].'</td>
</tr>
<tr>
<td>Add : Service Tax 3% on Rs.(a+b)</td>
<td>';$formatedMessag .=$inv[5].'</td>
</tr>
<tr>
<td>Add : Educational Cess 2% On 3% </td>
<td>';$formatedMessag .= $inv[6].'</td>
</tr>
<tr>
<td>Add : Secondary& Higher Education Cess 1% on 3% </td>
<td>';$formatedMessag .= $inv[7].'</td>
</tr>
<tr style=" font-weight: bold;font-size: 12px;background-color:seashell;">
<td>Total Payable Amount</td>
<td>';$formatedMessag .='INR ' . $inv[9].'</td>
</tr>
';$formatedMessag .='
</table>
</div>
This is my CSS:
.table1{
width: 990px;
margin-left: 5px;
border: 1px solid #CDCDCD;
}
.table1 th{
background: none repeat scroll 0 0 #EEEEEE;
padding: 10px;
font-size: 11px;
color: #777777;
border: 1px solid #CDCDCD;
}
.table1 tr{
padding: 10px;
font-size: 11px;
height: 30px;
border: 1px solid #CDCDCD;
}
.table1 tr td:first-child{
font-weight: bold;
text-align: left;
border: 1px solid #CDCDCD;
}
.table1 td{
padding-left: 3px;
border: 1px solid #CDCDCD;
color: #333333;
}
This is because when you sent a mail it can't access the style class,
Instead of this <table class="table1"> use inline css like:
<table style='width: 990px; etc;'>.