ReactJs не создает квитанцию ​​от POS-принтера - PullRequest
Новая
       4

ReactJs не создает квитанцию ​​от POS-принтера

0 голосов
/ 12 ноября 2018

Я хочу напечатать квитанцию ​​с EPSON TM-T82 .

Я создаю приложение для ресторана с использованием API laravel и ReactJS Front End. Для печати чеков или счетов я использую jsPDF для печати чеков на термопринтере. jsPDF использует некоторые размеры бумаги (A4, A3, Legal ...). Но нет термобумаги для принтеров шириной 4 дюйма и высотой рулона.

Объект печати будет задан массивом / json. Примерный формат счета выглядит следующим образом.

Что я пробовал 

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;

Требования к счетам

  • Заголовок (название ресторана, адрес, контакт и дата / время, счетчик, номер счета) должен быть по центру.
  • После общего количества элементов, горизонтальное разделение должно быть там.
  • Текст Net Total, CASH и Balance должен быть выровнен по правому краю, а эти суммы выровнены по правому краю.
  • Наконец, уведомление должно быть напечатано с заголовком, как указано выше --- IMPORTANT NOTICE ---.

Формат счета 

|             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         | }

Вопросы:

  • Как установить произвольный размер бумаги, я прочитал Aidiakapi здесь
  • Содержание должно быть в правильном выравнивании (например, цены выровнены по правому краю).
  • Один клик для печати

Образец JSON или массив 

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