Am trying to print a receipt using the ePos sdk from epson using the tm-U220 and tm-220ii.
Note: the npm escpos package works fine but is not an option because the package cant use the double comand that DOUBLES the size of the font in the tm-U220.
The epson sdk works fine if I create a single HTML page with:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Tercer intento</title>
</head>
<body>
<div id="app">
</div>
<script src="epos-2.17.0.js"></script>
<script>
var printer = null;
var ePosDev = new epson.ePOSDevice();
ePosDev.connect('192.168.6.142', 8008, cbConnect);
function cbConnect(data) {
if(data == 'OK' || data == 'SSL_CONNECT_OK') {
ePosDev.createDevice('matricial', ePosDev.DEVICE_TYPE_PRINTER,
{'crypto':false, 'buffer':false}, cbCreateDevice_printer);
} else {
alert(data);
}
}
function cbCreateDevice_printer(devobj, retcode) {
if( retcode == 'OK' ) {
printer = devobj;
printer.timeout = 60000;
printer.onreceive = function (res) { alert(res.success); };
printer.oncoveropen = function () { alert('coveropen'); };
print();
} else {
alert(retcode);
}
}
function print() {
printer.addTextLang('en');
printer.addTextDouble(true, true);
printer.addText('Total\n 3656L.\n');
printer.addCut(printer.CUT_FEED);
printer.send();
}
</script>
</body>
</html>
I want this logic into a vue component. but I can't import or require the "epos-2.17.0.js" file example:
(file structure)
-node_modules
-public
-src
--components (where the component is)
--js (where the sdk is)
//-------inside vue component------------
<script>
import epson from '../../public/epos-2.17.0';
export default {
name: 'HelloWorld',
setup(){
const imprimir = () =>{
var printer = null;
var ePosDev = new epson.ePOSDevice();
ePosDev.connect('192.168.6.142', 9100, cbConnect);
function cbConnect(data) {
if(data == 'OK' || data == 'SSL_CONNECT_OK') {
ePosDev.createDevice('matricial', ePosDev.DEVICE_TYPE_PRINTER,
{'crypto':false, 'buffer':false}, cbCreateDevice_printer);
} else {
alert(data);
}
}
function cbCreateDevice_printer(devobj, retcode) {
if( retcode == 'OK' ) {
printer = devobj;
printer.timeout = 60000;
printer.onreceive = function (res) { alert(res.success); };
printer.oncoveropen = function () { alert('coveropen'); };
print();
} else {
alert(retcode);
}
}
function print() {
printer.addTextLang('en');
printer.addTextDouble(true, true);
printer.addText('Total\n 3656L.\n');
printer.addCut(printer.CUT_FEED);
printer.send();
}
// return 1;
}//imprimir
return{imprimir}
}//setup
}//export
</script>
Is the exact same as in the single HTML page but now the browser console show error:
Uncaught TypeError: _public_epos_2_17_0__WEBPACK_IMPORTED_MODULE_0___default.a.ePOSDevice is not a constructor
at Proxy.imprimir (HelloWorld.vue?fdab:12)
at Object.onClick._cache.<computed>._cache.<computed> (HelloWorld.vue?fdab:2)
at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:154)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:163)
at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js?830f:367)
imprimir @ HelloWorld.vue?fdab:12
Object.onClick._cache.<computed>._cache.<computed> @ HelloWorld.vue?fdab:2
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:154
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?5c40:163
invoker @ runtime-dom.esm-bundler.js?830f:367
Edit#1 I found out that the epson library is called a IIFE, and that could explain the problem. However, I can't find info on how to use a IIFE in a vue component.
