epson sdk 用于 vue.js 中的 javascript？

编程问答 2022-04-22

问题描述

我正在尝试使用 tm-U220 和 tm-220ii 使用 epson 的 ePos sdk 打印收据。

注意： npm escpos 包工作正常，但不是一个选项，因为该包不能使用双命令来使 tm-U220 中的字体大小加倍。

如果我使用以下内容创建单个 HTML 页面，epson sdk 可以正常工作：

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

我想把这个逻辑变成一个 vue 组件。但我无法导入或需要“epos-2.17.0.js”文件 例子：

(file structure)
-node_modules
-public
-src
--components (where the component is)
--js (where the sdk is)

//-------vue 组件内部------------

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

与单个 HTML 页面完全相同，但现在浏览器控制台显示错误：

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

编辑#1 我发现 epson 库被称为 IIFE，这可以解释这个问题。但是，我找不到有关如何在 vue 组件中使用 IIFE 的信息。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

importimportimportposposvue.js