如何在HTML页面中获取EPSON TM-T88V收据打印机的默认字体"Font A11"？

Question

我已经在HTML中创建了页面，并使用angularjs绑定数据并安装了EPSON TM-T88V收据打印机。 我想使用字体列表中的默认字体。我尝试使用另一种字体，如Verdana，无衬线等，但我的收据被褪色打印

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

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

Answer 1

使用php print选项。 您也可以更改字体大小和字体系列。

这里是示例 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);
?>