IONIC：如何通过蓝牙串口打印 HTML 内容？答案

【问题标题】：IONIC: How to print HTML content via Bluetooth Serial?IONIC：如何通过蓝牙串口打印 HTML 内容？
【发布时间】：2021-10-11 19:31:55
【问题描述】：

我正在制作 POS 应用程序。我通过蓝牙串行连接我的应用程序以将数据发送到打印机。我的打印机是RPP02N 蓝牙热敏打印机。我正在使用Bluetooth Serial 插件。

这是我的代码：

await BluetoothSerial.clear();
await BluetoothSerial.disconnect();
let connection = await BluetoothSerial.connect(pId);
connection.subscribe(async success => {
    if (success == 'OK') {
        BluetoothSerial.write("Test Print").then(() => {
            console.log("Print finished");
            BluetoothSerial.disconnect();
          });
        } else {
          BluetoothSerial.disconnect();
        }

这很好用，但我必须使用raw string 来获取数据，如下所示：

"     SHOP NAME     "
"  77 ABC ST, 12345 "
" ----------------- "
" <MY_________DATA> "

很难像这样对齐内容。我需要我的内容具有响应性，它可以打印在不同的纸张尺寸上。它还需要能够打印图像标志。

我该怎么做？

转换成图片

我通过转换为图像尝试了另一种方法。

这是我的 html 内容：

<canvas>
    <h3>Shop Name</h3>
    <h5>77 ABC ST, 12345</h5>
    <hr/>
    <p>My content</p>
</canvas>

这是代码：

var img = new Image();
img.src = canvas.toDataURL("image/png");

这是在img.onLoad()方法里面：

img.onLoad = async() => {
    ....
    ....
    const encoder = new EscPosEncoder();
    let result = encoder
        .image(img, 320, 160, 'atkinson', 128) //width must be multiplication of 8
        .encode();

    BluetoothSerial.write(result).then(() => {
        console.log("Print finished");
        BluetoothSerial.disconnect();
    });
}

我正在使用this节点模块转换成ecs pos。

它不工作，打印机打印 1 个空行。

打印原始 html

我尝试打印原始 html。事实证明，它确实按字面意思打印原始 html（例如：<canvas>....</canvas>）。

【问题讨论】：

标签： javascript typescript ionic-framework printing bluetooth

【解决方案1】：

要在蓝牙打印上打印 HTML 内容，您需要使用 esc-pos-encoder 对 HTML 数据进行编码。

以下是在蓝牙打印机上打印 HTML 内容的步骤。

获取 HTML 代码并将其附加到正文中。
现在获取 HTML 节点并为其创建图像。
创建图像后，使用 esc-pos-encoder 对图像数据进行编码。
将编码数据发送到打印机。

public print() {
    const elemId = this.prepareHtmlData(htmlStr, width);
    const node = document.getElementById(elemId);
    const img = new Image();
    img.onload = async () => {
        const imgWidth = this.checkNumberMultiple(img.naturalWidth, 8);
        const height = this.checkNumberMultiple(img.naturalHeight, 8);
        const encoder = new EscPosEncoder();
        const printData = (encoder.initialize().image(img, imgWidth, height).newline().encode()).buffer;
        console.log('sending data to device...');
        await bluetoothSerial.write(printData);
        await bluetoothSerial.disconnect();
    }
    const canvas = await html2canvas(node);
    let imgSrc = canvas.toDataURL("image/png");
    img.src = imgSrc;
}

【讨论】：