EOS 热敏打印机在使用 Flutter 框架时无法正确打印阿拉伯字符
EOS thermal printer does not print Arabic characters properly when using Flutter framework
上下文:
我有一台 EOS 热敏打印机,但它无法正确打印阿拉伯字符,如下图所示:
如您所见,阿拉伯文本打印不正确,并且是从左到右 (LTR),(应该是从右到左 - RTL)。
注意: 可以清楚的看到英文文字完美的打印在页尾。
问题:
如何在 flutter 中正确打印阿拉伯语文本?
附加信息:
Flutter 版本:2.5.3(稳定)
使用的包:escpos
在多个 Android 设备上测试 运行 Android 版本 (8, 9 ,10)
首先我使用了 esc_pos 包,但它没有用。
最后,我使用 打印包 打印了一张阿拉伯语发票,效果很好,下面有解释
This is the full code to use the printing package.
first, create a class to pass the parameters to it(the parameters that you need to print) in my case 4 required param.
class HtmlGeneratorParamsAccount {
final String daybet, payable, balance;
final List<AccountStatmentModel> list;
HtmlGeneratorParamsAccount({
required this.daybet,
required this.payable,
required this.balance,
required this.list,
});
}
String generateHtmlA(HtmlGeneratorParamsAccount p) {
String items = '''
''';
for (var i = 0; i < p.list.length; i++) {
DateFormat datee = DateFormat('yyyy/MM/dd', 'en');
DateTime forFormat = p.list[i].date;
final String formatted = datee.format(forFormat);
double amount = p.list[i].debitAmount + p.list[i].payableAmount;
items += '''<tr class = "item">''';
items += '''<td>${p.list[i].description}</td>''';
items += '''<td>${formatted}</td>''';
items += '''<td>${p.list[i].opName}</td>''';
items += '''<td>${double.parse(amount.toStringAsFixed(1))}</td>''';
items += '''</tr>''';
}
var pay = double.parse(p.payable).toStringAsFixed(1);
var day = double.parse(p.daybet).toStringAsFixed(1);
var html = """
then you need to use HTML to build the body of your invoice(shape)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<style>
.invoice-box {
max-width:1000px;
margin: auto;
padding: 8px;
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
font-size: 8px;
line-height: 24px;
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color: #555;
}
.invoice-box table {
width: 100%;
line-height: inherit;
text-align: center;
}
.invoice-box table td {
padding: 10px;
vertical-align: top;
}
.invoice-box table tr.top table td {
padding-bottom: 5px;
}
* {
box-sizing: border-box;
}
.column {
float: right;
width:23%;
padding: 16px;
}
.header{
text-align:center;
}
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<h2 class="header">كشف حساب</h2>
<h3 class="header">بيانات الزبون</h3>
<table>
<tr>
<div class="row">
<div class="column" >
<h4>المبلغ</h4>
<p></p>
</div>
<div class="column" >
<h4>نوع العملية</h4>
</div>
<div class="column" >
<h4>تاريخ</h4>
</div>
<div class="column" >
<h4>وصف</h4>
</div>
</div>
</tr>
$items
</table>
<div>
<p class="header">------------------------</p>
<p class="header">:مجموع ${day}</p>
<p class="header">:مجموع $pay</p>
<p class="header">:المبلغ ${p.balance}</p>
<p>---</p>
<p>--</p>
<p>-</p>
</div>
</body>
</html>""";
return html;
'''
创建函数
when you need to use it (in button for example)
printDoc(HtmlGeneratorParamsAccount 参数)异步{
await Printing.layoutPdf(
onLayout: (format) async => await Printing.convertHtml(
format: format,
html: generateHtmlA(params),
),
);
}
现在我们将在 IconButton
中使用 printDoc 函数
the params is the class we've made in the beginning, and we will pass the required parameters
IconButton(
onPressed: () {
HtmlGeneratorParamsAccount params=
HtmlGeneratorParamsAccount(
list: list,
payable: payableAmount.toString(),
daybet: debitTxt.toString(),
balance: balance.toString(),
);
printDoc(params);
},
icon: Icon(
Icons.print,
)),
你可以看看这个
这个 repo 使用 3 个 laiblary
secreenshot 将小部件转换为图像
和图像库将其转换为 uint8
并准备打印出来你喜欢展示
你可以从 here
查看
上下文:
我有一台 EOS 热敏打印机,但它无法正确打印阿拉伯字符,如下图所示:
如您所见,阿拉伯文本打印不正确,并且是从左到右 (LTR),(应该是从右到左 - RTL)。
注意: 可以清楚的看到英文文字完美的打印在页尾。
问题:
如何在 flutter 中正确打印阿拉伯语文本?
附加信息:
Flutter 版本:2.5.3(稳定)
使用的包:escpos
在多个 Android 设备上测试 运行 Android 版本 (8, 9 ,10)
首先我使用了 esc_pos 包,但它没有用。 最后,我使用 打印包 打印了一张阿拉伯语发票,效果很好,下面有解释
This is the full code to use the printing package. first, create a class to pass the parameters to it(the parameters that you need to print) in my case 4 required param.
class HtmlGeneratorParamsAccount {
final String daybet, payable, balance;
final List<AccountStatmentModel> list;
HtmlGeneratorParamsAccount({
required this.daybet,
required this.payable,
required this.balance,
required this.list,
});
}
String generateHtmlA(HtmlGeneratorParamsAccount p) {
String items = '''
''';
for (var i = 0; i < p.list.length; i++) {
DateFormat datee = DateFormat('yyyy/MM/dd', 'en');
DateTime forFormat = p.list[i].date;
final String formatted = datee.format(forFormat);
double amount = p.list[i].debitAmount + p.list[i].payableAmount;
items += '''<tr class = "item">''';
items += '''<td>${p.list[i].description}</td>''';
items += '''<td>${formatted}</td>''';
items += '''<td>${p.list[i].opName}</td>''';
items += '''<td>${double.parse(amount.toStringAsFixed(1))}</td>''';
items += '''</tr>''';
}
var pay = double.parse(p.payable).toStringAsFixed(1);
var day = double.parse(p.daybet).toStringAsFixed(1);
var html = """
then you need to use HTML to build the body of your invoice(shape)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<style>
.invoice-box {
max-width:1000px;
margin: auto;
padding: 8px;
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
font-size: 8px;
line-height: 24px;
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color: #555;
}
.invoice-box table {
width: 100%;
line-height: inherit;
text-align: center;
}
.invoice-box table td {
padding: 10px;
vertical-align: top;
}
.invoice-box table tr.top table td {
padding-bottom: 5px;
}
* {
box-sizing: border-box;
}
.column {
float: right;
width:23%;
padding: 16px;
}
.header{
text-align:center;
}
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<h2 class="header">كشف حساب</h2>
<h3 class="header">بيانات الزبون</h3>
<table>
<tr>
<div class="row">
<div class="column" >
<h4>المبلغ</h4>
<p></p>
</div>
<div class="column" >
<h4>نوع العملية</h4>
</div>
<div class="column" >
<h4>تاريخ</h4>
</div>
<div class="column" >
<h4>وصف</h4>
</div>
</div>
</tr>
$items
</table>
<div>
<p class="header">------------------------</p>
<p class="header">:مجموع ${day}</p>
<p class="header">:مجموع $pay</p>
<p class="header">:المبلغ ${p.balance}</p>
<p>---</p>
<p>--</p>
<p>-</p>
</div>
</body>
</html>""";
return html;
'''
创建函数
when you need to use it (in button for example)
printDoc(HtmlGeneratorParamsAccount 参数)异步{
await Printing.layoutPdf(
onLayout: (format) async => await Printing.convertHtml(
format: format,
html: generateHtmlA(params),
),
);
} 现在我们将在 IconButton
中使用 printDoc 函数the params is the class we've made in the beginning, and we will pass the required parameters
IconButton(
onPressed: () {
HtmlGeneratorParamsAccount params=
HtmlGeneratorParamsAccount(
list: list,
payable: payableAmount.toString(),
daybet: debitTxt.toString(),
balance: balance.toString(),
);
printDoc(params);
},
icon: Icon(
Icons.print,
)),
你可以看看这个
这个 repo 使用 3 个 laiblary
secreenshot 将小部件转换为图像 和图像库将其转换为 uint8 并准备打印出来你喜欢展示
你可以从 here
查看