Friday, February 23, 2018

javascript print receipt using javascript

print receipt using javascript

by on in
We can print any important receipt, voucher, statement etc by using javascript in web application.
Here we will discuss about how to print receipt, voucher, statement  by using our own design and proper format.

Demo : receipt.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>print receipt using javascript</title>
    <link rel="stylesheet" type="text/css" href="./printReceipt.css" />
    <script type="text/javascript" src="./printReceipt.js"></script>
</head>

<body>
    <div id="printReceiptHtml" class="margin_top float_left fullwidth">
        <div>
            <table class="float_right receipt_no_right">
                <tr>
                    <td class="receipt_right_side">Receipt number</td>
                    <td class="padding_left5 padding_right5"> : </td>
                    <td>124542151</td>
                </tr>
                <tr>
                    <td class="receipt_right_side">Invoice number</td>
                    <td class="padding_left5 padding_right5"> : </td>
                    <td>1</td>
                </tr>
                <tr>
                    <td class="receipt_right_side">Payment date </td>
                    <td class="padding_left5 padding_right5"> : </td>
                    <td>01/01/2018</td>
                </tr>
                <tr>
                    <td class="receipt_right_side"> Recipient</td>
                    <td class="padding_left5 padding_right5"> : </td>
                    <td>Laxman chavda</td>
                </tr>
            </table>
            <div class="receipt_header_main  margin_top">
                <div class="receipt_header_sub receipt_header_sub_head  paymentmain_table mainwidth">
                    <div class="width_40  text_align_left">Description </div>
                    <div class="width_20 text_align_center">Quantity</div>
                    <div class="width_20 text_align_center">Price</div>
                    <div class="width_20 text_align_center">Amount</div>
                </div>
                <div class="">
                    <div class="receipt_desc mainwidth">
                        <div class="width_40 text_align_left ">Item 1</div>
                        <div class="width_20 text_align_center">2</div>
                        <div class="width_20 text_align_center">5</div>
                        <div class="width_20 text_align_center">10</div>
                    </div>
                    <div class="receipt_desc mainwidth">
                        <div class="width_40 text_align_left ">Item 2</div>
                        <div class="width_20 text_align_center">3</div>
                        <div class="width_20 text_align_center">7</div>
                        <div class="width_20 text_align_center">21</div>
                    </div>
                    <div class="receipt_desc mainwidth">
                        <div class="width_40 text_align_left ">Item 3</div>
                        <div class="width_20 text_align_center">1</div>
                        <div class="width_20 text_align_center">3</div>
                        <div class="width_20 text_align_center">3</div>
                    </div>
                    <div class="receipt_desc mainwidth">
                        <div class="width_40 text_align_left ">Item 4</div>
                        <div class="width_20 text_align_center">2</div>
                        <div class="width_20 text_align_center">6</div>
                        <div class="width_20 text_align_center">12</div>
                    </div>
                    <div class="receipt_desc mainwidth">
                        <div class="width_40 text_align_left ">Item 5</div>
                        <div class="width_20 text_align_center">10</div>
                        <div class="width_20 text_align_center">5</div>
                        <div class="width_20 text_align_center">50</div>
                    </div>
                    <div class="receipt_header_sub  text_align_center paymentmain_table mainwidth ">
                        <div class="width_40">&nbsp; </div>
                        <div class="width_20">&nbsp;</div>
                        <div class="width_20 receipt_total"> Total amount</div>
                        <div class="width_20">96</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="print">
                        <button id="printButton" type="button" onclick="printReceipt()">Print</button>
    </div>
</body>

</html>

printReceipt.js

function printReceipt(){
        var printContents = document.getElementById("printReceiptHtml").innerHTML;
        var params = [
            'height=' + screen.height,
            'width=' + screen.width,
            'fullscreen=yes'].join(','),

        popup = window.open("", 'popUpWindow', params);
        /*jshint multistr: true */
        popup.document.write(
            '<html>\
                <head>\
                <title>receipt</title>\
                <link rel="stylesheet" type="text/css" href="./printReceipt.css" />\
                </head>\
                <body class="print">'+ printContents+ '\
                <script>\
                window.onload = function() { window.print(); };\
                \
                (function() {\
            var beforePrint = function() {\
                /*console.log("Functionality to run before printing.");alert("before print dialog open");*/\
            };\
            var afterPrint = function() {\
                /*console.log("Functionality to run after printing");alert("after print dialog closed");*/\
                window.close();\
            };\
        \
            if (window.matchMedia) {\
                var mediaQueryList = window.matchMedia("print");\
                mediaQueryList.addListener(function(mql) {\
                    if (mql.matches) {\
                        beforePrint();\
                    } else {\
                        afterPrint();\
                    }\
                });\
            }\
        \
            window.onbeforeprint = beforePrint;\
            window.onafterprint = afterPrint;\
        }());\
                </script>\
                </body>\
            </html>'
        );
        popup.onfocus = function () {
          setTimeout(function () {
            popup.focus();
            popup.document.close();
          }, 1);
        };
}

printRecipt.css

@charset "utf-8";

/* CSS Document */

.float_right {
    float: right
}

.margin_top {
    margin-top: 10px;
}

.text_align_center {
    text-align: center;
}

.padding_left5 {
    padding-left: 5px;
}

.padding_right5 {
    padding-right: 5px;
}

.margin_top5 {
    margin-top: 5px;
}

.margin_bottom5 {
    margin-bottom: 5px;
}

.receipt_no_right {
    color: #555555;
    font-size: 13px;
}

.receipt_header_main {
    clear: both;
    float: left;
    max-height: 500px;
    width: 100%;
}

.receipt_header_sub {
    border-bottom: 1px solid #d6d6d6;
    float: left;
    font-size: 13px;
    line-height: 40px;
    width: 100%;
}

.receipt_header_sub_head {
    background: #f7f7f7 none repeat scroll 0 0;
    color: #155c9c !important;
}

.width_40 {
    float: left;
    font-weight: normal;
    margin-bottom: 0;
    width: 44%;
    padding-left: 10px;
}

.width_20 {
    float: left;
    font-weight: normal;
    margin-bottom: 0;
    width: 18%;
}

.receipt_desc {
    border-bottom: medium none;
    color: #555555;
    float: left;
    font-size: 13px;
    line-height: 40px;
    width: 100%;
}

.receipt_total {
    color: #555555
}

.receipt_right_side {
    width: auto;
    color: #155c9c;
}

.print {
    padding-top: 10px;
    clear: both;
}

By using this demo, you may make your own  receipt, voucher, statement  etc as you want.
By at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)