Ndtyjky

I want to print a receipt with EPSON TM-T82.

I am creating a restaurant app using given laravel API and ReactJS Front End. For the Bill or Invoice printing, I use jsPDF to print bill with thermal printer. jsPDF uses some paper sizes (A4, A3, legal ...). But there is not thermal printer paper which is 4 inch width and a roll of height.

The print object will be given by an array/json. The sample bill format as follows.

What I tried

import React from 'react';

import * as jsPDF from 'jspdf'



class JSPDFTest extends React.Component

{

    constructor(props)

    {

        super(props);

        this.printPDF = this.printPDF.bind(this);

    }



    printPDF()

    {

        var specialElementHandlers = {

            '#myId': function(element, renderer)

            {

                return true;

            },

        };



        var pdf = new jsPDF();



        pdf.text(10, 10, 'Hello World');



        pdf.save('Test.pdf');

    }



    render()

    {

        return (

        <div>

            <div id="myId">

                <h2> HTML to PDF</h2>

                <p> A sample HTML to PDF</p>

            </div>

            <button onClick = {this.printPDF}> Download PDF </button>

        </div> 

        );

    }

}



export default JSPDFTest;

Bill requirements

• The header (Restaurant name, Address, Contact and Date/Time, Counter, Bill no) should be center alignment.


• After the total items, horizontal separated should be there.


• The text Net Total, CASH and Balance should be right alignment and those amounts in right alignment.


• Finally notice should be printed with the title as above --- IMPORTANT NOTICE ---.

Bill format

|             ABC Restaurant            | }

|            Sunny Road, Canada         | }

|           Contact : 123456789         | } // This is header should be centered 

|                                       | }

| 13/11/2018 12:45:49   SAKTHY   No: 59 | }

|---------------------------------------|

| NO |   ITEM  |  PRICE | QTY |  AMOUNT | 

|:--:|:-------:|:------:|:---:|--------:| }

| 1    The big tasty Pizza              | }

|      ET4565    500.00   2.00  1000.00 | }

| 2    Crunchy huge Buggers             | } // Item name in first line others next line

|      BG8765    250.00   2.00   500.00 | } // PRICE and AMOUNT right aligned

| 3    1.5 l Coca-Cola pack             | }

|      CC9874     50.00   5.00   250.00 | }

|---------------------------------------| 

| Net Total                     1750.00 | }

|                                       | } 

| CASH                          2000.00 | }

| Balance                        250.00 | }

|-----------IMPORTANT  NOTICE-----------| } // Footer monetary values right aligned                                                             

| In case of a price discrepancy return | }

|   the bill and item within 2 day to   | }

|         refund the difference         | }

Questions :

• How to set random paper size, I read Aidiakapi here
  


• Contents should be in the correct alignment (e.g: Prices right aligned).


• One click to print

Sample json or array

{

    "header": { 

        "invoice": "59",

        "name": "ABC Restaurant",

        "address": "Sunny Road, Canada",

        "contact": "123456789",

        "date": "13/11/2018 12:45:52",

        "counter": "SAKTHY"

    },

    "items": [{

        "no": "1",

        "item": "The big tasty Pizza",

        "price": "500.00",

        "qty":"2.00",

        "amount":"1000.00"

    },

    {

        "no": "2",

        "item": "Crunchy huge Buggers",

        "price": "250.00",

        "qty":"2.00",

        "amount":"500.00"

    },

    {

        "no": "3",

        "item": "1.5 l Coca-Cola pack",

        "price": "50.00",

        "qty":"5.00",

        "amount":"250.00"

    }],

    "footer": {

        "total":"1750.00",

        "cash":"2000.00",

        "balance":"250.00",

        "notice": "In case of a price discrepancy, return the bill and item within 2 days to refund the difference."

    },

}