ReactJs does not create recipt from POS Printer

Question

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."
    },
}