javascript - ReactJs 不会从 POS 打印机创建收据

Question

我想用EPSON TM-T82打印收据。

我正在使用给定的 laravel API 和 ReactJS 前端创建一个餐厅应用程序。对于账单或发票打印，我使用 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;

账单要求

• 标题（餐厅名称、地址、联系人和日期/时间、柜台、账单号）应居中对齐。
• 在总项目之后，应该有横向分隔。
• 文本 NetTotal和应该是右对齐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."
    },
}

标签： javascriptjspdfbillingpos