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.
this is my first post and im already totally confused about my project right now :x
im able to make a successful connection to the sql db and also receive my data which displays on the top left, BUT its supposed to display in a html table, not somewhere on the screen :O
Here is the website to see the code in action, though there is none yet!
http://blackskill.square7.ch/
Here is the code which is running fine, but maybe im just too stupid and new for coding yet xd
<!DOCTYPE html>
<?php
$connection=mysqli_connect("localhost","username","password","db_name");
if ($connection) {
echo "database online <br>";
} else {
die("Connection failed. Reason: ".mysqli_connection_error());
}
$sql="SELECT * FROM blackskill_playerdb";
$results=mysqli_query($connection,$sql);
if (mysqli_num_rows($results)>0) {
while($row=mysqli_fetch_array($results)) {
echo '<tr>
<td>'.$row[0].'</td>
<td>'.$row[1].'</td>
<td>'.$row[2].'</td>
<td>'.$row[3].'</td>
</tr>';
echo "<br>";
}
}
mysqli_close($connection);
?>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 20%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2><center>Inofficial S.K.I.L.L. - Special Force 2 - Dishonor List</center></h2>
<input type="text" id="myInput" onkeyup="aa" placeholder="Search for player..." title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:40%;">Player</th>
<th style="width:20%;">Clan</th>
<th style="width:20%;">Evidence</th>
<th style="width:20%;">Added to list</th>
<?php while($row=mysqli_fetch_array($results)) : ?>
<tr>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['clan']; ?></td>
<td><?php echo $row['rulebreak']; ?></td>
<td><?php echo $row['addlist']; ?></td>
</tr>
<?php endwhile ?>
</tr>
</table>
<tbody>
</body>
</html>
i hope we can find an answer together with friendship, emotions and friendship!
regards
I have one table which is displaying proper in desktop. I want to change the layout or structure of table in mobile. Please check below image. I have to display like that. I have to display all the information in one row in mobile.Would you help me in this?
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Mobile</th>
</tr>
</thead>
<tbody>
<?php
if (isset($result_all_records->num_rows) > 0) {
// output data of each row
while($row = $result_all_records->fetch_assoc()) {
echo "
<tr>
<td>{$row['id']}</td>
<td>{$row['Name']}</td>
<td>{$row['Email']}</td>
<td>{$row['Mobile']}</td>
";
}
}
else {
echo "No records found";
}
?>
</tbody>
</table>
I found the solution from http://codepen.io/anon/pen/QwPVNW
We have to add `data-label='column name' and need to use below code in media queries. it will work
echo "
<tr>
<td data-label='id'>{$row['id']}</td>
<td data-label='Name'>{$row['Name']}</td>
<td data-label='Email'>{$row['Email']}</td>
<td data-label='Mobile'>{$row['Mobile']}</td>
";
#media only screen and (max-width: 384px) {
table {
border: 0;
}
table thead {
display: none;
}
table tr {
margin-bottom: 10px;
display: block;
border-bottom: 2px solid #ddd;
}
table td {
display: block;
text-align: left;
font-size: 13px;
border-bottom: 1px dotted #ccc;
}
table td:last-child {
border-bottom: 0;
}
table td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
margin-right: 20px;
}
}
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
This is most likely the culprit for this page:
http://www.mypicx.com/04192010/ff/
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
font-family:Arial, Helvetica, sans-serif; letter-spacing: 1px; font-size:3;
font-size:10px;
}
th
{
background-color:#A7C942;
color:white;
}
I don't know why, but the page has some php scripts in it which shows a table from mysql database. As you can see in the url above.
Please help, why do I see those lines everytime I put those css scripts
Looks like your borders are being set to all of the tables in the page, and not just one.
Try something like:
.mytable
{
border-collapse:collapse;
}
.mytable th, .mytable td
{
border: 1px solid black;
font-family:Arial, Helvetica, sans-serif; letter-spacing: 1px; font-size:3;
font-size:10px;
}
.mytable th
{
background-color:#A7C942;
color:white;
}
And use a class in the HTML on the table you wish to have these borders on:
<table class="mytable">
<tr>
<th>Time</th>
</tr>
<tr>
<td><span class="A">8:00 AM</span></td>
</tr>
</table>