 |
| Create an invoice with custom sizes |
What is an Invoice?
An invoice is a commercial/Business document That Includes sale transaction and indicating the products name, product sizes, products quantities, and prices for products/services the seller had provided the buyer.
An Invoice is a document in which the details of products or services is noted in such a way that is easily understandable to anyone. An invoice is necessary to keep records of products or services. So that it can help in future for any business issue.
When you are going to create an invoice using html and css. After Creating an invoice, if you are going to print that invoice Then it will be printed with a A4 size page. Now you need to print your invoice with custom page size then this article for you.
Sometimes we need to create custom invoice page size. For this purpose, we need to design invoice page size with css and html. In this post, i have created a custom invoice page with css and html. This custom invoice page will take one-fourth part of A4 size page. That means by using one A4 size page we can create four invoice.
In this article, i am going to show custom invoice page with a simple example. After that, I will show a full project with source code.
Code of Custom Invoice Page:
This simple example, I have divided with three different part. First one CSS part, Second one HTML part and Third one is JavaScript Part.
In this CSS part, I am showing how to design the invoice page. Using this css code you can easily design your invoice page. You can also redesign your invoice page using css code. In the following i have given the css code within opening style tag and ending style tag.
CSS Example:
<style>
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #FAFAFA;
font: 12pt "Tahoma";
}
.page {
width: 101.6mm;
min-height: 142.24mm;
padding: 0 auto;
margin: 0 auto;
border: 1px #D3D3D3 solid;
background: white;
}
.subpage {
border: 1px red solid;
height: 142.24mm;
}
@page {
width: 101.6mm;
height: 142.24mm;
margin: 0;
}
@media print {
html, body {
width: 101.6mm;
height: 142.24mm;
background: white;
}
.page {
margin: 0;
border-radius: initial;
width: 101.6mm;
min-height: 142.24mm;
background: white;
}
}
</style>
<style>
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #FAFAFA;
font: 12pt "Tahoma";
}
.page {
width: 101.6mm;
min-height: 142.24mm;
padding: 0 auto;
margin: 0 auto;
border: 1px #D3D3D3 solid;
background: white;
}
.subpage {
border: 1px red solid;
height: 142.24mm;
}
@page {
width: 101.6mm;
height: 142.24mm;
margin: 0;
}
@media print {
html, body {
width: 101.6mm;
height: 142.24mm;
background: white;
}
.page {
margin: 0;
border-radius: initial;
width: 101.6mm;
min-height: 142.24mm;
background: white;
}
}
</style>
In HTML Page:
In this HTML part, You can place your css and javascript code in head section. Html page is started with Opening html tag and end with ending Html tag. You can also use javascript code below of ending html tag and also use external link to add css code.
<html>
<head></head>
<body>
<div class="book">
<div class="page">
<div class="subpage">Page One</div>
</div>
</div>
</body>
</html>
<html>
<head></head>
<body>
<div class="book">
<head></head>
<body>
<div class="book">
<div class="page">
<div class="subpage">Page One</div>
</div>
</div>
</body>
</html>
</body>
</html>
Javascript Example:
In Javascript part, I have given javascript code.
<script>
window.print();
</script>
<script>
window.print();
</script>
Using the above three part you can easily create an invoice. But It will show with A4 size page. It's so easy way to create an invoice.
Now if you need to Custome Invoice page Then you have to follow the following example. In the below example i have given full source code step by step. That;s why by following the below source code anyone can create an custom invoice page.
Full Source Code of Custom Invoice Page:
In this example I have used only one page to create custom invoice page. After running the below code you will get an custome invoice page that is one fourth of A4 page.
Using One A4 size page you can create four invoice.
<?php
include('includes/header.php');
include('includes/menu.php');
?>
<div id="page-wrapper" >
<div id="page-inner">
<div class="row">
<div class="col-md-12">
<?php include("head.php")?>
<div class="panel panel-default">
<div class="panel-heading">
Print Page
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div id="page">
<div class="subpage">
<?php
$tmp=0;
if(isset($_GET["id"]) && $_GET["id"]!=NULL){
$x=$_GET["slid"];
$qry=mysql_query("SELECT `tble_name`.*, `tble_name`.`col_name` FROM `tble_name`, `tble_name` WHERE `tble_name`='$x' AND `tble_name`.`id`=`tble_name`.`id` ");
$data=mysql_fetch_array($qry);
$fl=mysql_query("SELECT * FROM `tble_name` WHERE `id`= '".$data["col_name"]."'");
$fld=mysql_fetch_array($fl);
$cid = $_GET["id"];
$rid = $_GET["rid"];
$get_rent=mysql_query("SELECT `col_name` FROM `tble_name` WHERE `col_name`='$cid' AND `col_name`='$rid' ");
$get_rent_row=mysql_fetch_array($get_rent);
?>
<style>
#size{
margin: 0;
}
.sl{
width:5%;
text-align:center;
}
.dtl{
width:70%;
text-align:center;
}
.dtl1{
width:70%;
text-align:left;
}
.val{
text-align:center;
}
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #FAFAFA;
font: 12pt "Tahoma";
}
.page {
width: 101.6mm;
min-height: 142.24mm;
padding: 0 auto;
margin: 0 auto;
/* border: 1px #D3D3D3 solid; */
background: white;
}
.subpage {
/* border: 1px red solid;*/
height: 142.24mm;
}
@page {
width: 101.6mm;
height: 142.24mm;
margin: 0;
}
@media print {
html, body {
width: 101.6mm;
height: 142.24mm;
background: white;
}
.page {
margin: 0;
border-radius: initial;
width: 101.6mm;
min-height: 142.24mm;
background: white;
}
}
</style>
<div id="size">
<center>
<font size=2><b>35/A, AK Tower, New Market</font><br>
<font size=2>Dhaka 1200<br>
Phone: (+880) 17xxxxxxx</font></br>
</br></center>
<span style="font-size:14px;">
<table width="98%" align=center>
<tr>
<td>Serial Number : <?php echo $_GET["slid"];?> </td>
<td>Floor/Shop : <?php echo $fld["f_name"]?>/<?php echo $data["ob_sname"]?></td></tr>
<tr>
<td>
Name : <?php echo $data["c_name"]?></td>
<td>Rent Month: <?php echo $data["ob_bill_month"]?></td>
</tr>
<tr>
<td>Issue Date: <?php echo dfpage($data["ob_issue"])?> </td>
</tr>
</table><br>
<table width="98%" border=1 align=center>
<tr><th class="">Serial Number</th><th class="dtl">Details</th><th style="text-align:center">Amount</th></tr>
<tr>
<td class="">01</td>
<td class="dtl1">Monthly Rent</td>
<td class="val"><?php echo $get_rent_row["r_mrent"];
$tmp+=$get_rent_row["r_mrent"];?></td>
</tr>
<tr>
<td class="">02</td>
<td class="dtl1">Electricity Bill</td>
<td class="val"><?php echo $data["electric_bill"]; $tmp+=$data["ob_uu_bill"];?></td>
</tr>
<tr>
<td class="">03</td>
<td class="dtl1">Due Bill</td>
<td class="val"><?php echo $data["due_bill"]; $tmp+=$data["ob_mcharge"];?></td>
</tr>
<tr><td class="">04</td>
<td class="dtl1">Service Charge</td>
<td class="val"><?php echo $data["service_bill"]; $tmp+=$data["ob_vat"];?></td>
</tr>
<tr>
<td class="" colspan="2" align="center" ><b>Total Bill</b></td>
<td width="15%" class="val"><?php echo $tmp = $data["total_bill"];?></td>
</tr>
</table>
</span>
<!-- <span style="margin-left:15px">
Amount : <?php echo convertNumberToWord($tmp);?> Taka Only</span> --><br><br><br>
<span style="margin-left:0px">(Signature)</span>
<span style="margin-left:0px">(Signature)</span>
<span style="margin-left:0px">(Owner Signature)</span>
</div>
</div>
</div>
<?php
}
?>
</div>
<div class="panel-body">
<div class='col-md-12'>
<input type="button" value="Print" onclick="PrintElem2('#page')" class="btn-success" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /. ROW -->
<hr />
</div>
<!-- /. PAGE INNER -->
</div>
<!-- /. PAGE WRAPPER -->
</div>
<?php include('includes/footer.php');?>
<script type="text/javascript">
function PrintElem2(elem)
{
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'my div', 'height=595px,width=420px');
var is_chrome = Boolean(mywindow.chrome);
mywindow.document.write('<html><head><title>Binary IT</title><style>a {text-decoration:none;}</style>');
/*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
mywindow.document.write('</head><body>');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
if (is_chrome) {
setTimeout(function() { // wait until all resources loaded
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print(); // change window to winPrint
mywindow.close(); // change window to winPrint
}, 500);
} else {
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
}
return true;
}
</script>
<?php
include('includes/header.php');
include('includes/menu.php');
?>
<div id="page-wrapper" >
<div id="page-inner">
<div class="row">
<div class="col-md-12">
<?php include("head.php")?>
<div class="panel panel-default">
<div class="panel-heading">
Print Page
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div id="page">
<div class="subpage">
<?php
$tmp=0;
if(isset($_GET["id"]) && $_GET["id"]!=NULL){
$x=$_GET["slid"];
$qry=mysql_query("SELECT `tble_name`.*, `tble_name`.`col_name` FROM `tble_name`, `tble_name` WHERE `tble_name`='$x' AND `tble_name`.`id`=`tble_name`.`id` ");
$data=mysql_fetch_array($qry);
$fl=mysql_query("SELECT * FROM `tble_name` WHERE `id`= '".$data["col_name"]."'");
$fld=mysql_fetch_array($fl);
$cid = $_GET["id"];
$rid = $_GET["rid"];
$get_rent=mysql_query("SELECT `col_name` FROM `tble_name` WHERE `col_name`='$cid' AND `col_name`='$rid' ");
$get_rent_row=mysql_fetch_array($get_rent);
?>
<style>
#size{
margin: 0;
}
.sl{
width:5%;
text-align:center;
}
.dtl{
width:70%;
text-align:center;
}
.dtl1{
width:70%;
text-align:left;
}
.val{
text-align:center;
}
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #FAFAFA;
font: 12pt "Tahoma";
}
.page {
width: 101.6mm;
min-height: 142.24mm;
padding: 0 auto;
margin: 0 auto;
/* border: 1px #D3D3D3 solid; */
background: white;
}
.subpage {
/* border: 1px red solid;*/
height: 142.24mm;
}
@page {
width: 101.6mm;
height: 142.24mm;
margin: 0;
}
@media print {
html, body {
width: 101.6mm;
height: 142.24mm;
background: white;
}
.page {
margin: 0;
border-radius: initial;
width: 101.6mm;
min-height: 142.24mm;
background: white;
}
}
</style>
<div id="size">
<center>
<font size=2><b>35/A, AK Tower, New Market</font><br>
<font size=2>Dhaka 1200<br>
Phone: (+880) 17xxxxxxx</font></br>
</br></center>
<span style="font-size:14px;">
<table width="98%" align=center>
<tr>
<td>Serial Number : <?php echo $_GET["slid"];?> </td>
<td>Floor/Shop : <?php echo $fld["f_name"]?>/<?php echo $data["ob_sname"]?></td></tr>
<td>Serial Number : <?php echo $_GET["slid"];?> </td>
<td>Floor/Shop : <?php echo $fld["f_name"]?>/<?php echo $data["ob_sname"]?></td></tr>
<tr>
<td>
Name : <?php echo $data["c_name"]?></td>
<td>Rent Month: <?php echo $data["ob_bill_month"]?></td>
</tr>
<tr>
<td>Issue Date: <?php echo dfpage($data["ob_issue"])?> </td>
</tr>
</table><br>
<table width="98%" border=1 align=center>
<tr><th class="">Serial Number</th><th class="dtl">Details</th><th style="text-align:center">Amount</th></tr>
<tr>
<td class="">01</td>
<td class="dtl1">Monthly Rent</td>
<td class="val"><?php echo $get_rent_row["r_mrent"];
<td class="val"><?php echo $get_rent_row["r_mrent"];
$tmp+=$get_rent_row["r_mrent"];?></td>
</tr>
<tr>
<td class="">02</td>
<td class="dtl1">Electricity Bill</td>
<td class="val"><?php echo $data["electric_bill"]; $tmp+=$data["ob_uu_bill"];?></td>
</tr>
<tr>
<td class="">03</td>
<td class="dtl1">Due Bill</td>
<td class="val"><?php echo $data["due_bill"]; $tmp+=$data["ob_mcharge"];?></td>
</tr>
<tr><td class="">04</td>
<td class="dtl1">Service Charge</td>
<td class="val"><?php echo $data["service_bill"]; $tmp+=$data["ob_vat"];?></td>
</tr>
<tr>
<td class="" colspan="2" align="center" ><b>Total Bill</b></td>
<td width="15%" class="val"><?php echo $tmp = $data["total_bill"];?></td>
</tr>
</table>
</span>
<!-- <span style="margin-left:15px">
Amount : <?php echo convertNumberToWord($tmp);?> Taka Only</span> --><br><br><br>
<span style="margin-left:0px">(Signature)</span>
<span style="margin-left:0px">(Signature)</span>
<span style="margin-left:0px">(Owner Signature)</span>
</div>
</div>
</div>
<?php
}
?>
</div>
<div class="panel-body">
<div class='col-md-12'>
<input type="button" value="Print" onclick="PrintElem2('#page')" class="btn-success" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /. ROW -->
<hr />
</div>
<!-- /. PAGE INNER -->
</div>
<!-- /. PAGE WRAPPER -->
</div>
<?php include('includes/footer.php');?>
<script type="text/javascript">
function PrintElem2(elem)
{
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'my div', 'height=595px,width=420px');
var is_chrome = Boolean(mywindow.chrome);
mywindow.document.write('<html><head><title>Binary IT</title><style>a {text-decoration:none;}</style>');
/*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
mywindow.document.write('</head><body>');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
if (is_chrome) {
setTimeout(function() { // wait until all resources loaded
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print(); // change window to winPrint
mywindow.close(); // change window to winPrint
}, 500);
} else {
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
}
return true;
}
</script>
EmoticonEmoticon