如何在Vue.js项目中集成Epson ePOS SDK实现tm-U220打印机小票打印

你遇到的报错是因为爱普生的ePOS SDK是IIFE格式的类库，执行后只会把epson对象挂载到浏览器全局window上，没有导出符合ES模块规范的内容，所以用import引入的方式无法拿到可用的导出对象。

推荐解决方案（全局引入） #

• 第一步：将epos-2.17.0.js文件放到项目public文件夹根目录
• 第二步：修改项目入口HTML文件public/index.html，在</body>标签前添加SDK引入代码：

<script src="%PUBLIC_URL%/epos-2.17.0.js"></script>

• 第三步：修改Vue组件代码，删除import语句，直接使用全局epson对象即可，同时修正端口号为SDK要求的8008：

<script>
/* global epson */
export default {
  name: 'HelloWorld',
  setup(){
    const imprimir = () =>{
      var printer = null;
      var ePosDev = new epson.ePOSDevice();
      // 注意端口要和单独测试的HTML页一致，用8008不要用9100
      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();
      }
    }
  return{imprimir}
  }
}
</script>

代码开头的/* global epson */是为了避免eslint报变量未定义的错误，如果你没有开启eslint校验可以删除。

可选方案（按需动态加载） #

如果只有当前组件需要用到打印功能，不想全局引入SDK，可以在组件挂载时动态创建script标签加载：

<script>
import { onMounted } from 'vue'
export default {
  name: 'HelloWorld',
  setup(){
    // 标记SDK是否加载完成
    let sdkLoaded = false;

    // 组件挂载时加载SDK
    onMounted(() => {
      if (window.epson) {
        sdkLoaded = true;
        return;
      }
      const script = document.createElement('script');
      script.src = '/epos-2.17.0.js';
      script.onload = () => {
        sdkLoaded = true;
      };
      document.body.appendChild(script);
    })

    const imprimir = () =>{
      if (!sdkLoaded) {
        alert('打印SDK加载中，请稍后重试');
        return;
      }
      var printer = null;
      var ePosDev = new window.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();
      }
    }
  return{imprimir}
  }
}
</script>

内容的提问来源于stack exchange，提问作者José Darío E. L.