html - 如何在HTML页面中获取EPSON TM-T88V小票打印机的默认字体 "Font A11"?

标签 html css thermal-printer

我已经用 HTML 创建了页面,并使用 angularjs 绑定(bind)了数据,并安装了 EPSON TM-T88V 收据打印机。 我想使用 fonts list 中的默认字体.我尝试使用另一种字体,如 Verdana、sans-serif 等,但我的收据是 faded print

有什么想法请建议我。?提前致谢。

<div id="section-to-print" style="width:350px;" class="container-fluid padding-2 inner">
<!--Printing Summary-->
<div *ngFor="let data of data; let ticketIndex = index">
    <table width="100%" style="padding:0 8px 8px 8px;" id="section-to-print-{{ticketIndex}}">
        <tr>
            <td>
                <table style="text-align: center; font-size: 16px; font-family:courier; text-transform: uppercase;" width="100%">
                    <tr>
                        <td width="100%">
                            <h1 style="text-transform: uppercase;" class="text-capitalize">{{storeDetail.name}}</h1>
                        </td>
                    </tr>
                    <tr>
                        <td width="100%">
                            <span>{{storeDetail.address}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td width="100%">
                            <span>{{storeDetail.city}} , {{storeDetail.zipCode}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td width="100%">
                            <b>
                                <span>{{storeDetail.phoneNumber}}</span>
                            </b>
                        </td>
                    </tr>
                    <tr>
                        <td width="100%">
                            <span class="text-capitalize" style="font-size: 40px; font-weight: bolder; background-color: black; color: white;">{{data.ticketId}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="padding-0 text-capitalize margin-top-10" style="text-transform: uppercase;">
                            <b style="font-size:20px;">{{data?.customer?.firstName}} {{data?.customer?.lastName}}</b>
                        </td>
                    </tr>
                    <tr *ngIf="data?.customer?.address">
                        <td>
                            {{data?.customer?.address}}
                        </td>
                    </tr>
                    <tr *ngIf="data?.customer?.email">
                        <td>
                            {{data?.customer?.email}}
                        </td>
                    </tr>
                    <tr *ngIf="data?.customer?.mobileNo">
                        <td>
                            <b>{{data?.customer?.mobileNo}}</b>
                        </td>
                    </tr>
                    <tr style="text-align:right;">
                        <td>
                            Rack : __________
                        </td>
                    </tr>
                    <tr>
                        <td>
                            {{data.createdOn | date}}
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Operator : {{data?.createdUser?.fullName}}</strong>
                        </td>
                    </tr>
                </table>

                <table style="border-top: 2px dashed black;border-bottom: 2px dashed black; font-size: 16px; font-family:courier;"
                    width="100%">
                    <thead style="border-top: 2px dashed black;">
                        <th style="text-align:left" width="50%">Item</th>
                        <th width="25%">Quantity</th>
                        <th style="text-align: right" width="25%">Price</th>
                    </thead>
                    <tbody style="border-top: 2px dashed black;" width="100%" *ngFor="let item of data?.list; let i = index" [ngClass]="!item.isDeleted ? '' : 'hide' ">
                        <tr>
                            <td style="text-align:left" width="50%">
                                <span class="bulk-item" *ngIf="item.extras?.isBulkItem">Bulk Items</span>
                                <!--strong style="text-transform:capitalize">{{item.catName}}</strong-->
                                <span style="text-transform:capitalize" *ngIf="item.catName !== null"></span>{{item.name}}
                                <span *ngIf="item.modifierType !== null"></span>
                                <strong>{{item.modifierType}}</strong>
                            </td>

                            <td width="25%">
                                <span *ngIf="item.cartQty >= 1">{{item.cartQty}}</span>
                            </td>

                            <td style="text-align: right" width="25%">
                                <strong *ngIf="!item.isFuturePrice">{{item.finalPrice | currency:'USD':true:'1.2-2'}}</strong>
                                <strong *ngIf="item.isFuturePrice">*****</strong>
                            </td>
                        </tr>

                        <tr *ngIf="(item.extras?.repairCharges?.length > 0 || item.extras?.upCharges?.length > 0) && item.cartQty > 1">
                            <td style="text-transform:capitalize">Base Price</td>
                            <td></td>
                            <td style="text-align: right">
                                <span *ngIf="!item.isFuturePrice">{{item.price | currency:'USD':true:'1.2-2'}}</span>
                                <span *ngIf="item.isFuturePrice">*****</span>
                            </td>
                        </tr>

                        <tr *ngFor="let repair of item.extras?.repairCharges; let index = index" [ngClass]="!repair.isDeleted ? '' : 'hide' ">
                            <td class="text-capitalize text-left">{{repair.name}}</td>

                            <td *ngIf="repair.type === 'AMOUNT'">&nbsp;</td>
                            <td *ngIf="repair.type === 'AMOUNT'" style="text-align: right">{{repair.price | currency:'USD':true:'1.2-2'}}</td>

                            <td *ngIf="repair.type === 'PERCENTAGE'">{{repair.percentage}}%</td>
                            <td *ngIf="repair.type === 'PERCENTAGE'" style="text-align: right">{{((repair.percentage * item.price) / 100) | currency:'USD':true:'1.2-2'}}</td>
                        </tr>

                        <tr *ngFor="let upCharge of item?.extras?.upCharges; let index = index">
                            <td class="text-capitalize text-left">{{upCharge.name}}</td>

                            <td *ngIf="upCharge.type === 'AMOUNT'">&nbsp;</td>
                            <td *ngIf="upCharge.type === 'AMOUNT'" style="text-align: right">{{upCharge.price | currency:'USD':true:'1.2-2'}}</td>

                            <td *ngIf="upCharge.type === 'PERCENTAGE'">{{upCharge.percentage}}%</td>
                            <td *ngIf="upCharge.type === 'PERCENTAGE'" style="text-align: right">{{((upCharge.percentage * item.price) / 100) | currency:'USD':true:'1.2-2'}}</td>
                        </tr>

                        <tr *ngIf="item.notes">
                            <td style="text-transform:capitalize">Notes</td>
                            <td colspan="2" class="padding-0">{{item.notes}}</td>
                        </tr>

                        <tr *ngFor="let coupon of item.extras?.coupons; let index = index">
                            <td style="text-transform:capitalize">
                                Coupon - {{coupon.name}}
                            </td>

                            <td *ngIf="coupon.type === 'AMOUNT'">&nbsp;</td>
                            <td *ngIf="coupon.type === 'AMOUNT'" style="text-align: right">-{{coupon.price | currency:'USD':true:'1.2-2'}}</td>

                            <td *ngIf="coupon.type === 'PERCENTAGE'">{{coupon.percentage}}% ({{item.cartQty}} X {{((coupon.percentage * item.price) / 100) | currency:'USD':true:'1.2-2'}})</td>
                            <td *ngIf="coupon.type === 'PERCENTAGE'" style="text-align: right">-{{((coupon.percentage * item.price) / 100) | currency:'USD':true:'1.2-2'}}</td>
                        </tr>
                    </tbody>
                </table>

                <table style="border-bottom: 2px dashed black; font-size: 16px; font-family:courier;" width="100%">
                    <tr>
                        <td width="50%">Sub Total :</td>
                        <td width="50%" style="text-align:right;">{{ data.subTotal | currency:'USD':true:'1.2-2' }}</td>
                    </tr>
                    <tr>
                        <td>Items Total :</td>
                        <td style="text-align:right;">{{ data.itemsTotal }}</td>
                    </tr>
                    <tr>
                        <td>Taxes (included):</td>
                        <td style="text-align:right;">{{ data.tax | currency:'USD':true:'1.2-2'}}</td>
                    </tr>

                    <tr *ngFor="let extraCharge of data?.extraCharges" [ngClass]="!extraCharge.isDeleted ? '' : 'hide' ">
                        <td>{{extraCharge.name}}:</td>
                        <td style="text-align:right;">{{ extraCharge.charges | currency:'USD':true:'1.2-2' }}</td>
                    </tr>

                    <tr class="padding-0">
                        <td class="text-capitalize text-elipsis">
                            <strong>Discount</strong>
                            <span *ngIf="data?.discount?.name">- {{data.discount.name}}</span> :
                        </td>

                        <td style="text-align:right;" *ngIf="data?.discount?.type === 'AMOUNT'">-{{ data?.discount?.amount | currency:'USD':true:'1.2-2' }}</td>

                        <td *ngIf="data?.discount?.type === 'PERCENTAGE'"></td>
                        <td *ngIf="data?.discount?.type === 'PERCENTAGE'" style="text-align:right;">-{{((data?.discount?.percentage * data.subTotal)/100) | currency:'USD':true:'1.2-2'}}
                        </td>

                        <td style="text-align:right;" *ngIf="!data?.discount?.type || data?.discount?.type === null" style="text-align:right;">-{{ 0 | currency:'USD':true:'1.2-2' }}
                        </td>
                    </tr>

                    <tr class="padding-0">
                        <td>
                            <strong>Grand Total :</strong>
                        </td>
                        <td style="text-align:right;">
                            <strong *ngIf="data?.grandTotal > 0">{{ data.grandTotal | currency:'USD':true:'1.2-2' }}</strong>
                            <strong *ngIf="data?.grandTotal == 0">{{ 0 | currency:'USD':true:'1.2-2' }}</strong>
                        </td>
                    </tr>

                    <tr>
                        <td colspan="3" style="text-align: center; border-top: 2px dashed black;font-size: 21px">
                            <strong>Delivery Date:</strong>
                        </td>
                    </tr>

                    <tr>
                        <td colspan="3" style="text-align: center; border-bottom: 2px dashed black;font-size: 21px;">
                            <strong>{{data?.deliveryDate | date}}</strong>
                        </td>
                    </tr>

                    <tr style="border-top: 2px dashed black;">
                        <td colspan="3" width="100%">
                            <ngx-barcode *ngIf="data?.barcode != 0" [bc-value]="data?.barcode" [bc-display-value]="true" [bc-format]="CODE128"></ngx-barcode>
                        </td>
                    </tr>

                </table>
            </td>
        </tr>
    </table>
</div>

最佳答案

使用 php 打印选项。您还可以更改字体大小和字体系列..

这里是示例 php 代码...

<?php
header('Content-Type: text/plain; charset=UTF-8');

$printer = "\\\\BALA\\EPSON TM-T88IV Receipt"; 

$handle = printer_open($printer);
printer_start_doc($handle,"Testpage");
printer_start_page($handle);
$font = printer_create_font("Arial", 20, 10, 700, false, false, false, 0);
$pen = printer_create_pen(PRINTER_PEN_DOT, 1, "000000");
printer_select_pen($handle, $pen);
printer_select_font($handle, $font);
printer_draw_text($handle, "welcome", 10, 10);

printer_delete_font($font);
printer_delete_pen($pen);
printer_end_page($handle);
printer_end_doc($handle);
printer_close($handle);

?>

关于html - 如何在HTML页面中获取EPSON TM-T88V小票打印机的默认字体 "Font A11"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50818485/

相关文章:

jquery - 对子元素的链接引用不起作用 JQuery

css - 如何使用 css 从顶部固定下拉菜单?

performance - 如何提高ESC/POS Thermal_Printer图像打印速度?

java - "PrinterException: Paper' s 可成像宽度太小 "I can see what' s 错误,但我该如何修复它?

javascript - 获取 Canvas 的图像线坐标

html - 如何在动态创建的输入标签中获取span标签的html

javascript - 你如何使用 JavaScript 添加/删除隐藏在 <p hidden> 中

javascript - 滚动速度操纵CSS jquery

java - 热敏收据打印机自动剪切问题

javascript - 如何在 ionic 菜单按钮关闭时触发功能