Why do the borders of my tables not appear when I print my pdf to the screen?
I'm using the mPDF library.
I create the tables in html and for some reason it is not showing.
I already tried using inline CSS but it didn't work, for me.
<?php
require_once 'MPDF57\MPDF57\mpdf.php';
class TablePDF {
public function printPDF() {
$mpdf = new mPDF();
$border = 2 ;
$mpdf->SetHeader("Tabela");
$mpdf->SetFooter("Tabela");
$htmlpdf= "
<html>
<head>
<link type='text/css' rel=' rel='heet' href=' href='tstrap.min.css'>
<link type='text/css' rel='stylesheet' href='css/estilo.css'>
<style type='.text/css.'>
<title>Table</title>
</style>
.td{
style='border: 1px solid';
}
</head>
<body>
<table class='tabela' border=".$border." style='border:10px solid;'>
<tr style='border:10px solid black'>
<th width='150' style='border:10px solid black; '>GE</th>
<td width='200' style='border:10px solid black; '>0</td>
<td width='200' style='border:10px solid black; '><strong>Nome Curto</strong></td>
<td width='200' style='border:10px solid black; '>0</td>
</tr>
</table>
<table class='tabela' border=".$border." style='border:10px solid black'>
<tr>
<th width='150'>Valor</th>
<td width='200'>0</td>
<td width='200'><strong>FG</strong></td>
<td width='200'>0</td>
</tr>
</table>
<table class='tabela' border=".$border." style='border:10px solid black'>
<tr>
<th width='150'> Jugular </th>
<td width='117'>0</td>
<td width='117'>0</td>
<td width='117'>0</td>
<td width='118'>0</td>
<td width='119'>0</td>
</tr>
</table>
<table class='tabela' border=".$border." style='border:10px solid black'>
<tr>
<th width='150'>EXP3D</th>
<td width='200'>0</td>
<td width='200'>0</td>
<td width='200'>0</td>
</tr>
</table>
<table class='tabela' border=".$border." style='border:10px solid black'>
<tr>
<th width='150'>EXP28D</th>
<td width='200'>0</td>
<td width='200'>0</td>
<td width='200'>0</td>
</tr>
</table>
<table class='tabela' border=".$border." style='border:10px solid black'>
<tr>
<th width='150'>Carotida</th>
<td width='303'>0</td>
<td width='303'>0</td>
</tr>
</table>
</body>
</html>";
$mpdf -> useOnlyCoreFonts = true;
$mpdf->WriteHTML($htmlpdf);
$mpdf->Output();
}
}
?>
Then I use this to use this function to print the pdf:
<?php
require_once 'TablePDF.php';
$var = new TablePDF();
$var->printPDF();
?>
EDIT: the problem has been solved, i just started deleting the table class in the TABLE tag line because for some reason it wastn recognizing it as a class.
thanks alot folks.
td {
border: 1px solid;
}
You don't have to create style every time that you need to use a td in your page, you only call the style.
Related
I'm having trouble designing the pdf of my system. here's a pic of my pdf:
What I want to do is to limit the number of items in the table by 10 items after that the rest goes to the next page with the same header and footer which is fixed already. just like this:
Purchase Request PDF
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PDF</title>
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
<style>
#items tr{border:1px solid #000000;}
#items tbody tr td{border:1px solid #000000;}
#items thead td{background-color:#231F20;color:#FFFFFF;}
.header { position: fixed; left: 0px; top: -40px; right: 0px;}
.footer { position: fixed; left: 0px; bottom: 200px; right: 0px;}
</style>
<link rel="stylesheet" href="{{ asset('css/lato.css') }}">
<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+128" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="header">
<div class="row">
<div class="col-xs-3" style="font-family: 'Libre Barcode 128', cursive; font-size: 35px;padding: 10px 0px 0px 0px;">{{$pr->pr_form_no}}</div>
<div class="col-xs-9">
<table cellspacing='0' cellpadding='5' style="border-width: 0 !important;padding:0px 0px 0px 60px;">
<tr>
<td style="padding: 10px;"><img src="{{asset('images/sfclogo.png')}}" width="50px" height="50px"></td>
<td>
<table style="text-align: center;style='width:45%'">
<tr><td>REPUBLIC OF THE PHILIPPINES</td></tr>
<tr><td>PROVINCE OF LA UNION</td></tr>
<tr><td>CITY OF SAN FERNANDO</td></tr>
</table>
</td>
<th style="padding-top: 10px;padding-left: 10px"><p style="background-color: #000;color: #FFF; text-align: center;padding: 10px;">PR</p></th>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;color: white;background-color: black; font-size: 18px">
PURCHASE REQUEST
</div><br>
</div>
<div class="row">
<table style='width:100%;border:1px solid #000000;font-size:11pt;' cellspacing='0' cellpadding='5' class='font1'>
<tr>
<td style='width:40%'>
<table style='width:90%;padding-right: 0px;' cellpadding='0' cellspacing='0'>
<tr>
<td style='width:100%;padding:1px;padding-left:10px;' colspan='2'>DEPARTMENT:</td>
</tr>
<tr>
<td style='width:100%;padding:0px;padding-left:10px;' colspan='2'>{{$dept->office_name}}<hr style='color:#000000;height:1px;margin-bottom:3px;margin-top:0px;padding-left:10px;' /></td>
</tr>
<tr>
<td style='width:15%;padding:1px;padding-left:10px;'>SECTION:</td>
<td style='width:75%;padding:0px;padding-left:0px;'>{{$section->office_name}}<hr style='color:#000000;height:1px;margin-bottom:3px;margin-top:0px;' /></td>
</tr>
</table>
</td>
<td style='width:30%;'>
<table style='width:90%;' cellpadding='0' cellspacing='0'>
<tr>
<td style='width:20%;padding:1px;'>PR No.</td>
<td style='width:70%;padding:0px;border-bottom:1px solid #000000;'>{{$pr->pr_form_no}}</td>
</tr>
<tr>
<td style='width:20%;padding:1px;'>SAI No.</td>
<td style='width:70%;padding:0px;border-bottom:1px solid #000000;'></td>
</tr>
<tr>
<td style='width:20%;padding:1px;'>ObR No.</td>
<td style='width:70%;padding:0px;border-bottom:1px solid #000000;'></td>
</tr>
</table>
</td>
<td style='width:30%'>
<table style='width:95%;' cellpadding='0' cellspacing='0'>
<tr>
<td style='width:15%;padding:1px;'>Date</td>
<td style='width:70%;padding:0px;border-bottom:1px solid #000000;'> {{$dt->toFormattedDateString()}}</td>
</tr>
<tr>
<td style='width:15%;padding:1px;'>Budget</td>
<td style='width:70%;padding:0px;border-bottom:1px solid #000000;'><strong> PHP {{number_format($pr->budget_alloc,2)}}</strong></td>
</tr>
<tr>
<td style='width:15%;padding:1px;'>Supplier</td>
<td style='width:70%;padding:0px;border-bottom:1px solid #000;'> {{$pr->supplier_type}}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
<div class="footer">
<div class="row">
<table style='width:100%;border:1px solid #000000;font-size:12px;margin-left:auto;margin-right:auto;margin-top:40px;' cellspacing='0' cellpadding='3' class='font1'>
<tr>
<td style='width:39%; font-weight:bold;text-align:left;border:1px solid #000000;'>
REQUESTING OFFICE<br/><br/><br/><br/>
</td>
<td style='width:60%;border:1px solid #000000;vertical-align:top;font-weight:bold;' colspan='2' rowspan='3'>
PURPOSE<br/>
<div style='width:100%;text-align:center;font-weight:normal;font-size:11pt;' class='font1'>
{{$pr->purpose}}
</div>
</td>
</tr>
<tr>
<td style='border:1px solid #000000;height:19px;text-align:center;text-transform:uppercase;font-weight:bold;'>
{{$pr->requestor_name}}
</td>
</tr>
<tr>
<td style='text-align:center;border:1px solid #000000;text-transform:uppercase;height:19px;font-weight:bold'>
{{$pr->requestor_position}}
</td>
</tr>
<tr>
<td colspan='3' style='background-color:#000000;height:20px;'>
</tr>
<tr>
<td style='width:33%; font-weight:bold;text-align:left;border:1px solid #000000;'>
APPROPRIATION AVAILABLE
</td>
<td style='width:33%; font-weight:bold;text-align:left;border:1px solid #000000;'>
FUNDS AVAILABLE
</td>
<td style='width:33%; font-weight:bold;text-align:left;border:1px solid #000000;'>
APPROVED
</td>
</tr>
<tr>
<td style='border:1px solid #000000;height:25px;text-align:center;text-transform:uppercase;font-weight:bold;'>
</td>
<td style='border:1px solid #000000;height:25px;text-align:center;text-transform:uppercase;font-weight:bold;'>
</td>
<td style='border:1px solid #000000;height:25px;text-align:center;text-transform:uppercase;font-weight:bold;'>
</td>
</tr>
<tr>
<td style='width:33%; font-weight:bold;text-align:center;border:1px solid #000000;text-transform:uppercase;'>
{{$aa->name}}<br/>
{{$aa->position}}
</td>
<td style='width:33%; font-weight:bold;text-align:center;border:1px solid #000000;text-transform:uppercase;'>
{{$c->name}}<br/>
{{$c->position}}
</td>
<td style='width:33%; font-weight:bold;text-align:center;border:1px solid #000000;text-transform:uppercase;'>
{{$approval->name}}<br/>
{{$approval->position}}
</td>
</tr>
</table>
</div>
<div class="row">
<div style='float:left;font-weight:normal;font-style:italic;font-size:7pt;width:40%;text-align:left;'>{{$created_code}}</div>
</div>
</div>
<div class="content" >
<div class="row">
<table style='width:100%;font-size:14px;text-align:center;border:1px solid #000000;' id='items' cellpadding='0' cellspacing='0'>
<thead>
<tr>
<td style='width:7%;font-weight:bold;'>ITEM NO.</td>
<td style='width:7%;font-weight:bold;'>QTY</td>
<td style='width:7%;font-weight:bold;'>UNIT</td>
<td style='width:49%;font-weight:bold;'>DESCRIPTION</td>
<td style='width:15%;font-weight:bold;'>ESTIMATED UNIT OF</td>
<td style='width:15%;font-weight:bold;'>ESTIMATED COST</td>
</tr>
</thead>
<tbody >
#foreach($list as $indexKey => $list)
<tr>
<td>{{$indexKey}}</td>
<td>{{$list->pr_qty}}</td>
<td>{{$list->pr_unit}}</td>
<td>{{$list->pr_description}}</td>
<td style='text-align: right;'>{{$list->pr_cost_per_unit}}</td>
<td style='text-align: right;'>{{$list->pr_estimated_cost}}</td>
</tr>
#if($indexKey >= 9)
#break
#endif
#endforeach
#for($i = $count; $i < 10; $i++)
<tr><td> </td><td> </td> <td> </td><td> </td><td> </td><td> </td></tr>
#endfor
</tbody>
<tfoot>
<tr style="background-color: #b0b1b2;">
<td colspan="5" style="text-align: right; font-weight: bold;">GRAND TOTAL</td>
<td style="text-align: right; font-weight: bold;">
{{number_format($grand_total,2)}}
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
</body>
</html>
I already attempted to use the break function of the blade to stop the loop when the items shown is already 10.
*Also sorry if the code looks like hell.
you can use some css styling for it just like below:
<style>
.page-break {
page-break-after: always;
}
</style>
<h1>page</h1>
<div class="page-break"></div>
<h1>Someother Page</h1>
if you want to make a page break after for example 5 divs then you can do something like this:
#php $check=0 #endphp
#foreach($array as $item)
#php $check++ #endphp
<!-- your code or something like divs -->
#if( $check % 5 == 0 )
#php echo '<div class="page-break"></div>'; #endphp ....
#endif
#endforeach
Hope you will get the idea from it.
I creating a PDF for print the address of users. I have the below HTML structure:
I have tried with the below code:
<?php $i=0; ?>
<tr valign="top">
foreach ($users as $user): ?>
<?php if ($i % 2 == 1) {?>
<tr valign="top">
<?php } ?>
But it's now work as expect.
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="48%" align="left" valign="top" style="padding:10px 10px 15px; font-size:14px; color:#333; font-family:Verdana, Geneva, sans-serif; border:1px solid #ccc;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="22%" height="25" valign="bottom">Name</td>
<td width="78%" valign="bottom" style="border-bottom:1px dashed #ccc;"> </td>
</tr>
<tr>
<td height="40" valign="bottom"> </td>
<td valign="bottom" style="border-bottom:1px dashed #ccc;"> </td>
</tr>
<tr>
<td height="40" valign="bottom">Phone</td>
<td valign="bottom" style="border-bottom:1px dashed #ccc;"> </td>
</tr>
</table></td>
<td width="4%" align="left"> </td>
<td width="48%" align="left" style="padding:10px 10px 15px; font-size:14px; color:#333; font-family:Verdana, Geneva, sans-serif; border:1px solid #ccc;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="22%" height="25" valign="bottom">Name</td>
<td width="78%" valign="bottom" style="border-bottom:1px dashed #ccc;"> </td>
</tr>
<tr>
<td height="40" valign="bottom"> </td>
<td valign="bottom" style="border-bottom:1px dashed #ccc;"> </td>
</tr>
<tr>
<td height="40" valign="bottom">Phone</td>
<td valign="bottom" style="border-bottom:1px dashed #ccc;"> </td>
</tr>
</table></td>
</tr>
<tr valign="top">
<td height="15" align="left"></td>
<td height="15" align="left"></td>
<td height="15" align="left"></td>
</tr>
</table>
In the abolve table I want to repeat the TD in each TR 2 times and added the blank TR after every TR.
The above HTML out should be the below image:
Could any one can help me out this.
If I get properly what you're looking for : I want to repeat in one TR repeat two TD
Then this code:
<?php
error_reporting(E_ALL); ini_set('display_errors', 1);
echo"<table>";
for ($i = 1; $i <= 10; $i++) {
if(($i % 2) == 1) // odd -> start TR
{ echo "<tr><td class=\"dark\">$i</td>"; }
else // even -> close TR
{ echo "<td class=\"red\">$i</td></tr><tr><td colspan=\"2\">whatever here</tr>"; }
}
echo"</table>";
?>
will give you this output :
<table>
<tr><td class="dark">1</td><td class="red">2</td></tr><tr><td colspan="2">whatever here</tr>
<tr><td class="dark">3</td><td class="red">4</td></tr><tr><td colspan="2">whatever here</tr>
<tr><td class="dark">5</td><td class="red">6</td></tr><tr><td colspan="2">whatever here</tr>
<tr><td class="dark">7</td><td class="red">8</td></tr><tr><td colspan="2">whatever here</tr>
<tr><td class="dark">9</td><td class="red">10</td></tr><tr><td colspan="2">whatever here</tr>
</table>
EDIT after you comment : added one 'blank' TR
Try below solution you missed out to close
<?php
$i=0;
foreach ($users as $user){
if ($i % 2 == 0) {?>
<tr valign="top">
<?php } ?>
<td width="48%" align="left" style="padding:10px 10px 15px; font-size:14px; color:#333; font-family:Verdana, Geneva, sans-serif; border:1px solid #ccc;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="22%" height="25" valign="bottom">Name</td>
<td width="78%" valign="bottom" style="border-bottom:1px dashed #ccc;"> </td>
</tr>
<tr>
<td height="40" valign="bottom"> </td>
<td valign="bottom" style="border-bottom:1px dashed #ccc;"> </td>
</tr>
<tr>
<td height="40" valign="bottom">Phone</td>
<td valign="bottom" style="border-bottom:1px dashed #ccc;"> </td>
</tr>
</table></td>
<?php if ($i % 2 == 0) {?>
</tr>
<?php } }?>
I am trying to figure out the problem in this, but not able to. Query is proper, Result i am getting. If i echo $html i get result, but nothing for WriteHTML();
Here is my code
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
include("connect.php");
$id = $_GET['id'];
include("mpdf/mpdf.php");
$mpdf=new mPDF('utf-8', 'A4');
$mpdf->debug = true;
$mpdf->useOnlyCoreFonts = true; // false is default
$mpdf->SetProtection(array());
$mpdf->SetTitle("My Company");
$mpdf->SetAuthor("MeAuthor");
$mpdf->SetWatermarkText("Demo");
$mpdf->showWatermarkText = false;
$mpdf->watermark_font = 'DejaVuSansCondensed';
$mpdf->watermarkTextAlpha = 0.1;
$mpdf->SetDisplayMode('fullpage');
$s1 = "SELECT * FROM mytable WHERE cid=".$id."";
$sql = mysqli_query($con, $s1) or die (mysqli_error($con));
$row = mysqli_fetch_array($sql);
$html = '
<html>
<head>
<body>
<!--mpdf
<htmlpageheader name="myheader">
<table width="100%"><tr>
<td width="80%" style="text-align: center; font-size: 16pt;">Company Name<br>
<span style="font-size: 11pt;text-align: center;">Address 123, Lorel Ipsum, sdfsdf sdsdgsdg,</span><br>
<span style="font-size: 11pt;text-align:center;">sdfdsfdsf, sfsdf - 100066
</td>
</tr>
</table>
</htmlpageheader>
<sethtmlpageheader name="myheader" value="on" show-this-page="1" />
<sethtmlpagefooter name="myfooter" value="off" />
mpdf-->
<table width="100%">
<tr><td colspan="2" align="right" width="40%"> Vocher No : '.$id.' </td></tr>
<tr>
<td width="70%">Debit A/C. : '.$row['account_no'].' </td>
<td width="30%" style="text-align: right">Date: '.date("d-m-Y").'</td></tr>
</table>
<div style="border: 1px solid black">
<table border="0" style="white-space:nowrap; border-spacing:0;" height="100%" cellspacing="5"><thead>
<tr>
<th width="30%" style="border-right:1px solid #000;">Name</th>
<th width="20%" style="border-right:1px solid #000;">E-Mail</th>
<th width="20%" style="border-right:1px solid #000;">Mobile</th>
<th width="30%" style="border-right:1px solid #000;">Particulars</th>
<th width="15%" style="border-right:1px solid #000;">RS.</th>
<th width="5%" style="border-right:1px solid #000;">P.</th>
</tr>
</thead>
<tr>
<td style="border-right:1px solid #000;" width="30%" height="100px;" >'.$row['name'].'</td>
<td style="border-right:1px solid #000;" width="20%">'.$row['email'].'</td>
<td style="border-right:1px solid #000;" width="20%">'.$row['mobile'].'</td>
<td style="border-right:1px solid #000;" width="30%">'.$row['purpose'].'</td>
<td style="border-right:1px solid #000;" width="15%">'.$row['amount'].'</td>
<td style="border-right:1px solid #000;" width="5%">00</td>
</tr>
<tr><td colspan="4" style="font-weight:bold;">Total Rs.</td> '.$row['amount'].'<td></tr>
</table></div>
<br>
<table border="0"><tr><td style="width=50%;">Mode of Payment : '.$row['mode'].' </td><td width="50%">Date : '.date('Y-m-d').'</td></tr>
<tr><td colspan="2">Rupees : </td></tr>
</table>
<br><br><br>
<table width="100%" border="0">
<tr><td width="20%"> Hon. Secretary </td>
<td width="20%">Hon. Treasurer</td>
<td width="20%">Hon. Trustee</td>
<td width="20%">Receiver s Signature</td></tr>
</table>
</body>
</html>
';
//echo $html;
echo $mpdf->WriteHTML($html);
//$mpdf->Output('Receipt.pdf','D');
$mpdf->Output();
?>
Method WriteHTML() returns void! So you'll not get any echo.
Note that you have not send anything to browser (even http-header) before Output().
I have the way to get the value of the td's at the time the row is selected using
$(this).find('.servid').val()
However I cannot find the way to get this value later.
<table id="servicetable" class="scroll" style="border: 1px solid #cbcbcb;" align="center">
<tbody>
<tr class="selected">
<td>Service</td>
<td class="servid" value="4004072">72569000</td>
<td class="origin">PAC</td>
<td class="street">60 KENDAL</td>
<td class="city">SANRDINO</td>
<td class="state">CA</td>
<td class="zip">99999</td>
</tr>
<tr>
<td>TelePacific Circuit</td>
<td class="servid" value="5369592">77051900</td>
<td class="origin">TP</td>
<td class="street">819 KAISER</td>
<td class="city">AHEM</td>
<td class="state">CA</td>
<td class="zip">88888</td>
</tr>
</tbody>
</table>
I need to later, after filling out more of the form, get the val() of the selected tr -> servid td
I have tried various things but they are not working
$('#servicetable .selected > td:nth-child(2)').val();
$('#servicetable').find('.selected > td:nth-child(2)').val();
$('#servicetable').find('tr.selected').find('.servid').val();
Below goes your sollution
alert($('#servicetable tr.selected > td.servid').attr('value'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="servicetable" class="scroll" style="border: 1px solid #cbcbcb;" align="center">
<tbody>
<tr class="selected">
<td>Service</td>
<td class="servid" value="4004072">72569000</td>
<td class="origin">PAC</td>
<td class="street">60 KENDAL</td>
<td class="city">SANRDINO</td>
<td class="state">CA</td>
<td class="zip">99999</td>
</tr>
<tr>
<td>TelePacific Circuit</td>
<td class="servid" value="5369592">77051900</td>
<td class="origin">TP</td>
<td class="street">819 KAISER</td>
<td class="city">AHEM</td>
<td class="state">CA</td>
<td class="zip">88888</td>
</tr>
</tbody>
</table>
One more thing you can not put value like this as it will not validate as per w3c, recommanded to put data-value, if HTML5.
And in jquery also you can put like
alert($('#servicetable tr.selected > td.servid').attr('data-value'));
$('#value1').text($('#servicetable .selected > td:nth-child(2)').attr('value'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="servicetable" class="scroll" style="border: 1px solid #cbcbcb;" align="center">
<tbody>
<tr class="selected">
<td>Service</td>
<td class="servid" value="4004072">72569000</td>
<td class="origin">PAC</td>
<td class="street">60 KENDAL</td>
<td class="city">SANRDINO</td>
<td class="state">CA</td>
<td class="zip">99999</td>
</tr>
<tr>
<td>TelePacific Circuit</td>
<td class="servid" value="5369592">77051900</td>
<td class="origin">TP</td>
<td class="street">819 KAISER</td>
<td class="city">AHEM</td>
<td class="state">CA</td>
<td class="zip">88888</td>
</tr>
</tbody>
</table>
<label id="value1"/>
IDEAL WAY
use data attribute as shown below,
<td class="servid" data-value="4004072">72569000</td>
$('#value1').text($('#servicetable .selected > td:nth- child(2)').data('value'));
It might be better if you tag the TR with the id you need and then have the "attributes" in the TDs.
You can then parse TDs based on TR
<tr class="selected" id="98989">
<td class="city">Lisbon</td>
.....
_tr = $("#servicetable .selected");
_trId=_tr.attr("id");
_trCity = _tr.find(".city").text();
.....
I have an web application that generates a small receipt format.
when printed to a generic/txt printer.. Nothing is printed to the sheet
Here is a sample of the print..
Removed
Please is there a way i could print this webpage to a generic/txt printer
Here is the html
<style>
body{
font-family:"Courier New", Courier, monospace;
font-size:13px;
}
.f1{
text-transform:uppercase;
display:block;
text-align:center;
}
.f2{
text-transform:uppercase;
display:block;
margin-left:10px;
}
.border_bottom{
border-bottom:2px dashed #000;
}
.border_top{
border-top:2px dashed #000;
}
.body_table{
border:1px dashed #CCCCCC;
padding:.5em;
}
</style>
</head>
<body onload="window.print();">
<table width="300" cellpadding="0" cellspacing="0" class="body_table">
<tr>
<td><span class="f1">Official Receipt</span></td>
</tr>
<tr>
<td><span class="f1">DreamWorks Pharmaceutical Industries Limited GH.</span></td>
</tr>
<tr>
<td><span class="f1">Plot 14 Blk 8A</span></td>
</tr>
<tr>
<td class="border_bottom"><span class="f1">0241093621</span></td>
</tr>
<tr>
<td class=""><span class="f2">RECEIPT NO.: 0241093621</span></td>
</tr>
<tr>
<td class=""><span class="f2">VAT REG #.: </span></td>
</tr>
<tr>
<td class=""><span class="f2">cashier.: </span></td>
</tr>
<tr>
<td class=""><span class="f2">date.: time: </span></td>
</tr>
<tr>
<td class="border_bottom"><span class="f2">customer.: time: </span></td>
</tr>
<tr>
<td>
<table width="98%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="5%"><span class="f2">QTY</span></td>
<td width="60%"><span class="f2">item</span></td>
<td width="15"><span class="f2">price</span></td>
<td width="15"><span class="f2">amt.</span></td>
</tr>
<tr>
<td class="f2">52</td>
<td>MALAREX TABS</td>
<td>2.6</td>
<td>135.20</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="border_top border_bottom">
<table width="100%" cellpadding="0" cellspacing="0" align="left" id="print_table7">
<tr>
<Td class="ash_backg" width="53%"><span>Subtotal</span></Td>
<td width="47%" align="right">135.20</td>
</tr>
<tr>
<Td class="ash_backg"><span>Discount</span></Td>
<td align="right">0.00</td>
</tr>
<tr>
<Td class="ash_backg"><span>VAT</span></Td>
<td align="right">0.00</td>
</tr>
<tr>
<Td class="ash_backg"><span>Total Due</span></Td>
<td align="right">135.20</td>
</tr>
<tr>
<Td class="ash_backg"><span>Paid</span></Td>
<td align="right">135.20</td>
</tr>
<tr>
<Td class="ash_backg"><span>Change</span></Td>
<td align="right">0.00</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Thank You dear customer</td>
</tr>
<tr>
<td>VAT Inclusive Where Applicable</td>
</tr>
</table>
</body>
Here's the Receipt Format HTML
<!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 http-equiv="Content-Type" content="text/plain; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#media screen{
body{
font-family:"Courier New", Courier, monospace;
font-size:13px;
}
.f1{
text-transform:uppercase;
display:block;
text-align:center;
}
.f2{
text-transform:uppercase;
display:block;
margin-left:10px;
}
.border_bottom{
border-bottom:2px dashed #000;
}
.border_top{
border-top:2px dashed #000;
}
.body_table{
border:1px dashed #CCCCCC;
padding:.5em;
}
}
#media print{
body{
font-family:"Courier New", Courier, monospace;
font-size:8px;
width:250px;
}
}
</style>
</head>
<body onload="window.print();">
<table width="300" cellpadding="0" cellspacing="0" class="body_table">
<tr>
<td><span class="f1">Official Receipt</span></td>
</tr>
<tr>
<td><span class="f1">DreamWorks Pharmaceutical Industries Limited GH.</span></td>
</tr>
<tr>
<td><span class="f1">Plot 14 Blk 8A</span></td>
</tr>
<tr>
<td class="border_bottom"><span class="f1">0241093621</span></td>
</tr>
<tr>
<td class=""><span class="f2">RECEIPT NO.: 0241093621</span></td>
</tr>
<tr>
<td class=""><span class="f2">VAT REG #.: </span></td>
</tr>
<tr>
<td class=""><span class="f2">cashier.: </span></td>
</tr>
<tr>
<td class=""><span class="f2">date.: time: </span></td>
</tr>
<tr>
<td class="border_bottom"><span class="f2">customer.: time: </span></td>
</tr>
<tr>
<td>
<table width="98%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="5%"><span class="f2">QTY</span></td>
<td width="60%"><span class="f2">item</span></td>
<td width="15"><span class="f2">price</span></td>
<td width="15"><span class="f2">amt.</span></td>
</tr>
<tr>
<td class="f2">6</td>
<td>MALAREX TABS</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td class="f2">1</td>
<td>PARAFEN PLUS TAB.</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td class="f2">5</td>
<td>ASTHAX INHALER</td>
<td>5</td>
<td>25</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="border_top border_bottom">
<table width="100%" cellpadding="0" cellspacing="0" align="left" id="print_table7">
<tr>
<Td class="ash_backg" width="53%"><span>Subtotal</span></Td>
<td width="47%" align="right">25.00</td>
</tr>
<tr>
<Td class="ash_backg"><span>Discount</span></Td>
<td align="right">0.00</td>
</tr>
<tr>
<Td class="ash_backg"><span>VAT</span></Td>
<td align="right">0.00</td>
</tr>
<tr>
<Td class="ash_backg"><span>Total Due</span></Td>
<td align="right">25.00</td>
</tr>
<tr>
<Td class="ash_backg"><span>Paid</span></Td>
<td align="right">25.00</td>
</tr>
<tr>
<Td class="ash_backg"><span>Change</span></Td>
<td align="right">0.00</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Thank You dear customer</td>
</tr>
<tr>
<td>VAT Inclusive Where Applicable</td>
</tr>
</table>
</body>
</html>
You can use CSS media types. Use one for the screen to make it look nice and one for print, to make it plain.
For example:
#media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
#media print
{
p.test {font-family:times,serif;font-size:10px;}
}
Yes, you can print the document as the above and you have to use the separate style sheet for the screen display and printing. CSS rules are:
#media screen
{
//Css
}
#media print{
#page { size:250px 375px; margin: 4px }
body{font-family:"Courier New", Courier, monospace; font-size:8px;}
.f1{text-transform:uppercase; display:block; text-align:center;}
.f2{text-transform:uppercase; display:block; margin-left:10px;}
.border_bottom{ border-bottom:2px dashed #000;}
.border_top{border-top:2px dashed #000;}
.body_table{border:1px dashed #CCCCCC; padding:.5em;}
}
In these you can describe the page size, colors and many more things Just Google the CSS Print specification and you would know more.
But, I think the another problem involved in your i.e. print using POS printer to print it. For that I would Like to suggest the way are:
Two simple ways to do it, depending on how much interference you're willing to accept in your interface.
Firstly, you can just use JavaScript to trigger your receipt page/iframe to print. This option is a little klunky, as it requires the cashier to confirm the print in the system dialogue.
But secondly, you always have the option of sharing each station's printer on the network. Your server-side component can print directly to it. And if it's a *nix server, it's pretty easy to do once each station's printer has added to / shared with the server. In PHP (with CUPs installed, I imagine):
// attempt to pipe to 'lp -d printername'
if (`echo "{$text}" | lp -d {$printer_name}`) {
// print successful
return true;
} else {
// print failed
return false;
}
For second method, If you're running a windows server, it's probably much more complicated.