( Ionic 6 ) ReferenceError: ThermalPrinter is not defined
a-satyateja opened this issue · comments
Unable to trigger print on Ionic 6.
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { BarcodeScanner } from '@capacitor-community/barcode-scanner';
import { ThermalPrinterPlugin } from 'thermal-printer-cordova-plugin/src';
// eslint-disable-next-line @typescript-eslint/naming-convention, no-var
declare var ThermalPrinter: ThermalPrinterPlugin;
@Component({
selector: 'app-folder',
templateUrl: './folder.page.html',
styleUrls: ['./folder.page.scss'],
})
export class FolderPage implements OnInit {
public folder: string;
devices = [];
constructor(
private activatedRoute: ActivatedRoute // private bluetoothSerial: BluetoothSerial
) {}
printCatch() {
try {
console.log(ThermalPrinter || 'ee');
this.print();
} catch (error) {
alert(error);
}
}
print() {
const formattedText =
'[C]<u><font size="big">ORDER N°045</font></u>\n' +
'[L]\n' +
'[C]================================\n' +
'[L]\n' +
'[L]<b>BEAUTIFUL SHIRT</b>[R]9.99e\n' +
'[L] + Size : S\n' +
'[L]\n' +
'[L]<b>AWESOME HAT</b>[R]24.99e\n' +
'[L] + Size : 57/58\n' +
'[L]\n' +
'[C]--------------------------------\n' +
'[R]TOTAL PRICE :[R]34.98e\n' +
'[R]TAX :[R]4.23e\n' +
'[L]\n' +
'[C]================================\n' +
'[L]\n' +
'[L]Raymond DUPONT\n' +
'[L]5 rue des girafes\n' +
'[L]31547 PERPETES\n' +
'[L]Tel : +33801201456\n';
ThermalPrinter.listPrinters(
{ type: 'bluetooth' },
(printers) => {
if (printers.length > 0) {
alert(printers);
} else {
alert('no printers;');
}
},
(e) => alert(e)
);
ThermalPrinter.printFormattedText(
{
type: 'bluetooth',
id: 'first', // You can also use the identifier directly i. e. 00:11:22:33:44:55 (address) or name
text: formattedText,
},
() => {
alert('Successfully printed!');
},
(error) => {
alert(error);
}
);
}
}
Did u find the solution?
Have u try using let in declare let ThermalPrinter: ThermalPrinterPlugin;
Try re-installing dependency in my case it was the solution.
Did you find the solution? I tried re-installing dependency as JuanFCVal said but didn't work
No that wasn't working for me @joseserrano15.
@JuanFCVal Can you please share any code snippets to shed more light on this? TIA.
In package.json
{
devDependencies:{
...
"thermal-printer-cordova-plugin": "^1.0.6",.
},
"cordova": {
...
"thermal-printer-cordova-plugin": {}
}
}
Then in the class you are going to use it.
...
import { PrinterToUse, ThermalPrinterPlugin } from 'thermal-printer-cordova-plugin/src';
declare let ThermalPrinter: ThermalPrinterPlugin;
Did you manage to solve this?
I'm having the exact same issue.
@JayRmz Unfortunately I couldn't. I tried as @JuanFCVal said but for me didn't work.
This is working for me,
@JayRmz @joseserrano15 please look at this [Repo] (https://github.com/Ans0n-Ti0/esc-pos-encoder-ionic-demo) working on Ionic 6, it's another approach to achieve printing.
Did anyone manage to solve this issue, please ?
I am getting this error because webpack didn't import the module because in my case I am developing for iOS but this module doesn't have iOS support - only Android. Going to switch to another module doesn't know which one yet.
Has anyone managed to solve this problem?
The only workaround I've found so far is to use:
https://github.com/Ans0n-Ti0/EscPosEncoderi
+
https://ionicframework.com/docs/v5/native/bluetooth-serial
Workaround(Android Only) (LAN connectivity) for me is to use
Printer Plugin
With
Socket Plugin
It seems to me that your code is not good...
I've moved call of printFormattedText inside listPrinters, because that is asynchronus...
And managed to trigger printer like this:
"use client";
import { Share } from "@capacitor/share";
import React, { useRef, useState } from "react";
import {
Printer,
ThermalPrinterPlugin,
} from "thermal-printer-cordova-plugin/src";
// import ThermalPrinterPlugin from "thermal-printer-cordova-plugin/www/thermal-printer.js";
declare let ThermalPrinter: ThermalPrinterPlugin;
export const Example = () => {
const [printers, setPrinters] = useState<Printer[]>([]);
const handlePrint = () => {
const formattedText =
'[C]<u><font size="big">ORDER N°045</font></u>\n' +
"[L]\n" +
"[C]================================\n" +
"[L]\n" +
"[L]<b>BEAUTIFUL SHIRT</b>[R]9.99e\n" +
"[L] + Size : S\n" +
"[L]\n" +
"[L]<b>AWESOME HAT</b>[R]24.99e\n" +
"[L] + Size : 57/58\n" +
"[L]\n" +
"[C]--------------------------------\n" +
"[R]TOTAL PRICE :[R]34.98e\n" +
"[R]TAX :[R]4.23e\n" +
"[L]\n" +
"[C]================================\n" +
"[L]\n" +
"[L]Raymond DUPONT\n" +
"[L]5 rue des girafes\n" +
"[L]31547 PERPETES\n" +
"[L]Tel : +33801201456\n";
ThermalPrinter.listPrinters(
{ type: "bluetooth" },
(printers) => {
if (printers.length > 0) {
setPrinters(printers);
ThermalPrinter.printFormattedText(
{
type: "bluetooth",
id: printers[0].address ?? "SimulatePrinter",
text: formattedText,
},
() => {
alert("Successfully printed!");
},
(error) => {
alert(error);
}
);
} else {
alert("no printers;");
}
},
(e) => alert(e)
);
};
return (
<div>
this is some kind of a test kekw
<button
style={{
margin: "5px",
border: "black",
color: "yellow",
}}
onClick={handlePrint}
>
Print Order
</button>
<pre>{JSON.stringify(printers, null, 2)}</pre>
</div>
);
};
hope this helps.. happy hacking!