分类： 产品策划

设计风格上我很喜欢https://chatui.io/，但是它是react的，我的vue3项目没法直接用，虽然可以用跨框架方案https://github.com/gloriasoft/veaury来集成，但这显然更适用于直接使用现有组件，而不是需要继续改造的情景。

还有一个风格和更新活跃度上都不错的是https://deepchat.dev/，但是经过一番研究，这个项目是完全基于web components的，虽然兼容性很好，可以同时用于vue和react等，但是为我的vue适配扩展显得依然比较繁重，短期内我没有这么多精力去维护。

再退一步来说，https://github.com/advanced-chat/vue-advanced-chat其实是个不错的方案，但近期更新较少，我担心后续维护有问题，不能继续吸血社区。另外，其中一些命名偏传统即时通讯概念，而不是面向AI，当然，功能上倒是没问题。

还有一个https://github.com/pdsuwwz/chatgpt-vue3-light-mvp实现了多种消息内容的适配，比如 markdown-it Mermaid/KaTex/LaTex 公式等，这是我想在对话中扩展的类型，但这个项目并没有封装为一个可插入的组件。

最终，我想在vue-advanced-chat的基础上，参考chatgpt-vue3-light-mvp的一些消息类型的扩展方式，做一个自定义的vue-advanced-chat组件。

其实LBS还有很多可以发挥的点，最近聊到了老兵地图，之前我还搞过绘本馆地图、北京露营地地图等。

最有意义的当属积水地图。

那时候真好，虽然微博只有两千多粉，但发点东西，这几家地图提供商都很积极响应，高德最快，上线也最快。

微信群里经常收到这样的文章，但看到财新我就怕了，你看半截，就看不下去了，因为人家要会员。

那如果自己有会员，又想把这篇文章分享给自己的朋友，该怎么办呢？

请看我在八年前提到的分享定价模式（http://futuremeng.sincebirth.spac/?p=4244）

具体来说，如果我是会员，我又想把一篇只有会员才能看的文章分享给朋友看，那我就为这篇文章付费，当然需要平台支持，买下若干次分享的权益，然后再转发到群里。

这样，最先若干个打开的用户就可以看了。分享数不够的时候，还可以点击申请分享者追加付费。

这个问题我一直很困惑，正如上一篇提到的raw打印，按说raw的意思就是直接将原始指令直接发送到设备上，比如将打印机视作一个usb设备，直接通过usb写入设备不就行了吗？

我一直没有调通这样的方案。理论上是可行的，但对打印机的一些设置可能会更复杂一些，或者是我的打印机不支持这种模式。

目前能做到的就是在oxs/mac上启用cups，添加一个打印机，添加一个匹配的驱动程序，很多国产（中国大陆）的热敏打印机不提供mac的驱动程序，但实际上，这些打印机的控制板厂商就那么几家，看看打印机说明书里面提到的指令类型，比如TSPL就知道该找哪个厂商的驱动，TSPL就找TSC，他家的官网上资料可以说是非常的全了，提供了各个语言的例程。

经过反复测试，在mac上有两种方式添加打印机，一种是开启cups的web页面（在那里添加打印机，选择raw方式，但这个路径我没跑通，打印机不正常工作。），可以在cups这里添加打印机，选择对应厂商的ppa驱动程序（同一个厂商的驱动程序因不同设备而有很多型号，但比较下文件就知道大同小异，主要体现在设备的最大打印宽度、最高打印速度、分辨率这三项上，还有一个是热敏和转印模式）。另一种方式是直接在系统偏好设置-打印机这里添加打印机，选择相应的ppa文件也可以。

最后回答题目里自己设置的问题，我也不知道。一种猜测是osx为了安全起见，必须通过cups才能访问打印设备。一种猜测是打印机不具备直接简单接收指令就能打印的能力，可能还需要一些默认配置，这些配置由驱动程序来提供（ppa文件就是一个文本/配置文件，里面的内容都可以看）。

其实之前参考过这篇文章

https://www.printnode.com/en/docs/what-is-raw-printing

但是他们提供的api没有命令式的，只能打文件，现在回头来看，打印机确实可以这么连接，直接安装为raw的方式就可以用程序打印了，并不需要找驱动。

当然，为了简化cups的操作，对普通用户来说，提供一个tsc的驱动在传统的打印机界面上安装会更简单一些。

在cups中添加的raw打印机只能在cups中可见，打印机与扫描仪管理中是看不见的，当然，node-printer中可以调用到这个打印机。

梳理一下基本概念：

标签打印机：重点当然在标签，每次打印一小截，标签一般是固定大小，指令如TSPL

票据打印机：重点当然是票据，按需打印长度，然后撕掉。指令如EOP。

面单打印机：快递单那种，应该是跟标签打印机差不多，只不过更大。

其实对于打印机厂商来说，很多都已经兼容多种指令了，当然不包括得力这种OEM还不提供开发文档的。

要做一个跨平台的连接器，需要满足几个条件：

（1）能够构建跨平台的发布，所以范围就锁定在electron、xamarin这样的方案上，js和c#虽然都熟悉，但最近用的多的还是js，所以优先选electron，但是其实对node不够熟悉，所以造成了上一篇关于buffer类型的困惑。

（2）搞清楚打印机在不同的操作系统如何连接，目前还没尝试usb直驱这种，在mac上还是通过cups来连接，windows上都有相应的驱动，可以不单独讨论。

（3）指令集兼容性，目前只尝试了TSPL这一种，后续还需要其他的ZPL之类的测试一下，还需要在各种指令之间转换，方便原来用某个指令集编写的程序直接对接。

（4）接入方式的兼容性，至少应该支持socket和http。

（5）统一的api，尤其是友好的RestFul模式的api，便于开发对接。

接下来就想为什么汉字是乱码呢？是command.setText(50, 100, “TSS24.BF2”, 1, 1, “一二三”);里面的汉字需要转码吗？

对照jpPrinter.addCommand里面把原来的转码去掉了，如果在command.setText(50, 100, “TSS24.BF2”, 1, 1, “一二三”);中把汉字转成unico呢，试了试也不行。

把jpPrinter.addCommand恢复回去，

jpPrinter.addCommand = function(content) {
      // 将指令转成数组装起;
      var code = new encode.TextEncoder("gb18030", {
        NONSTANDARD_allowLegacyEncoding: true,
      }).encode(content);
      for (var i = 0; i < code.length; ++i) {
        command.push(code[i]);
      }
      // command = command + content;
    };

还是会报错，throw new TypeError(‘first argument must be a string or Buffer’);

然后仔细一看，原来data复制不止是string类型，还可以是buffer类型。

那就接着从BluetoothPrinter往这里扒，因为不是蓝牙，不受每次传输的长度限制，所以把分段传输的逻辑去掉。

var data = Array.from(uint8Buf);
  var buffer = new ArrayBuffer(data.length);
  
  var dataView = new DataView(buffer);
  for (var i = 0; i < data.length; ++i) {
    dataView.setUint8(i, data[i]);
  }
  console.log(
    "data type is: " + typeof data + ", is buffer: " + Buffer.isBuffer(data)
  );

但是，还是报同样地错误。

然后发现Buffer.isBuffer(data)是false，为什么类型不对呢？

于是搜到了这里http://nodejs.cn/api/buffer.html#buffer_static_method_buffer_from_arraybuffer_byteoffset_length

是nodejs里面对Buffer有不同于js的类型定义。

于是改成：

var uint8Buf = command.getData();
  var buffer=Buffer.from(uint8Buf);
  console.log(
    "buffer type is: " + typeof buffer + ", is buffer: " + Buffer.isBuffer(buffer)
  );
  var jobid = "";
  printer.printDirect({
    data: buffer, // or simple String: "some text"
    printer: "Deli_DL_888B_NEW_", // printer name, if missing then will print to default printer
    type: "RAW", // type: RAW, TEXT, PDF, JPEG, COMMAND.. depends on platform
    success: function(jobID) {
      console.log("sent to printer with ID: " + jobID);
      jobid = jobID;
    },
    error: function(err) {
      console.log(err);
    },
  });

打印成功。

后来我找到了https://github.com/qihang666/BluetoothPrinter这个项目，人家用蓝牙直接连打印机，比如我手头的DL-888AW就有蓝牙，我用usb为什么就不行呢，所以我就着手将这个项目中的代码拿过来。

尽管他里面的打印机指令集叫jprinter，但指令集实际上是TSPL，所以理论上应该可以复用。

拿过来的部分是https://github.com/qihang666/BluetoothPrinter/tree/master/components/gprint，

考虑到https://github.com/tojocky/node-printer/blob/master/examples/print_raw.js这里面提示的是data部分需要string类型，所以，我把tsc.js里面的command改成了字符串类型，把

jpPrinter.addCommand = function(content) {
      // 将指令转成数组装起;
      var code = new encode.TextEncoder("gb18030", {
        NONSTANDARD_allowLegacyEncoding: true,
      }).encode(content);
      for (var i = 0; i < code.length; ++i) {
        command.push(code[i]);
      }
    };

改成了

jpPrinter.addCommand = function(content) {
       command = command + content;
    };

然后打印的时候：

var command = tsc.jpPrinter.createNew();
  console.log(command);
  command.setSize(60, 40);
  command.setGap(2);
  command.setCls();
  command.setText(50, 10, "2", 1, 1, "Hello");
  command.setText(50, 100, "TSS24.BF2", 1, 1, "一二三");
  // command.setQR(50, 50, "L", 5, "A", "977767937@qq.com");
  command.setPagePrint();

  var data=command.getData();
  var jobid = "";
  printer.printDirect({
    data: data, // or simple String: "some text"
    printer: "Deli_DL_888B_NEW_", // printer name, if missing then will print to default printer
    type: "RAW", // type: RAW, TEXT, PDF, JPEG, COMMAND.. depends on platform
    success: function(jobID) {
      console.log("sent to printer with ID: " + jobID);
      jobid = jobID;
    },
    error: function(err) {
      console.log(err);
    },
  });

惊喜出现了，打印机工作了，但是汉字是乱码。

中间走了一段弯路，因为一直无法直接用程序驱动打印机打出东西来，无法验证以前的思路是否可行，所以，想着是否应该给打印机找一找mac版的驱动，然后尝试直接在电脑上打印一个pdf文件，来和程序做下对比。于是，按照打印机的说明书里说的TSPL这个语言，找到了TSC这个厂商，他们家的网站上资源真是全啊https://www.chinatsc.cn/

按照类似的规格找了几个型号的打印机，下载驱动，然后发现其实人家的驱动都在一起。

这个ppd文件就是所谓驱动，用vscode打开，发现就是文本文件，对比一下，发现基本上都是一样的，对于热敏打印机来说，只有几个参数有区别，主要是打印宽度、打印速度、打印方式（热敏/热转印）。

找到了驱动，就可以在系统的打印机管理中添加打印机，然后自选某个驱动文件，比如我试了TA200，Deli_DL_888B_NEW是可以打印文件的。

但是我用node-printer还是无法打印。

  printer.printDirect({
    data:"测试", // or simple String: "some text"
    printer: "Deli_DL_888B_NEW_", // printer name, if missing then will print to default printer
    type: "RAW", // type: RAW, TEXT, PDF, JPEG, COMMAND.. depends on platform
    success: function(jobID) {
      console.log("sent to printer with ID: " + jobID);
      jobid = jobID;
    },
    error: function(err) {
      console.log(err);
    },
  });

打印机有时间连动都不动。

都调试起来以后，连接打印机，发现打印机根本没反应，网上找到的相关资料很少，大部分都是在windows或者linux上做的，难道是mac的osx有一些安全限制，导致打印的指令被拦截了。

于是照着这个思路查下去，终于找到了一个新的东西：CUPS。其实这个东西支持linux也支持mac，按照说明添加上打印机之后，确实能在mac的打印机列表中看到了，而且在系统打开一个文件用这个打印机打印，是有动作的，尽管是瞎走纸，没有真正的输出。但至少说明是有希望了。

那么为什么用electron-escpos还是无法打印呢，甚至依然连走纸反应都没有。

无奈又去得力的官网看了看，找到888B这个打印机的说明书，仔细瞅了一眼，竟然发现它说他的编程语言是TSPL，不兼容ESCPOS，擦，过于相信刚找到escpos这个神奇的协议的时候它所说的几乎所有的打印机都支持了。

https://blog.csdn.net/weixin_34355881/article/details/89543300这篇文章介绍了打印机主流的指令类型（ESC命令集+CPCL命令集+TSPL命令集）之间的区别。这就解释了上面我对打印机类型的模糊认识

好了，标签打印机一般用TSPL命令集，票据打印机一般用ESCPOS。而我用的得力888B(NEW)是标签打印机。

那么，就需要将原来的escpos换成tspl来写打印命令。

接上一篇，分清楚了两种模块的规范，那么怎么解决两种规范的不同呢，似乎可以通过配置babel来实现，于是我在babel.config.js中尝试了很多办法，都没有收效，归根结底是还没有搞清楚vue和electron之间是如何各自适用这些规范的。

按照某种说法，最新的vue是遵循ES6，而electron或者说node模块是CommonJs，但是，在项目中，npm install进来的模块都放在node_modules中，怎么区分呢，如果不是babel.config.js来负责，那就应该是electron相关的，于是我找到了electronBuilder这个配置。

在vue.config.js（如果没有则在项目根目录新建）中：

module.exports = {
  configureWebpack: {
    devtool: "source-map"
  },
  pluginOptions: {
    electronBuilder: {
      // List native deps here if they don't work
      externals: ["escpos", "escpos-usb"]
      // If you are using Yarn Workspaces, you may have multiple node_modules folders
      // List them all here so that VCP Electron Builder can find them
    }
  }
  // chainWebpack: config => {
  //   config.module
  //     .rule("js")
  //     .test(/\.jsx?$/)
  //     .exclude.clear()
  //     .end()
  //     .include.add(function() {
  //       return ["./node_modules/escpos", "./node_modules/escpos-usb", "src"];
  //     })
  //     .end();
  // }
};

这个发现得益于https://medium.com/@nyorikakar/printing-with-vue-electron-and-node-f52a730e63e7这篇文章，而且我还在后面的评论中发现了https://github.com/song940/node-escpos/issues/297，最终靠这些信息搞清楚了逻辑。

（1）对于用于node的模块，需要在vue.config.js的externals那里列出，这样，vue就不会让babel啥的那些loader去处理了。

（2）负责和node打交道的代码要放在background.js中，这在前面第二个连接中可以看到，而且最关键的是在vue的代码因为是通过BrowserWindow加载的，在其初始化是webPreferences中的nodeIntegration这个属性需要配置为true，const { ipcRenderer } = window.require(“electron”);才能用。而且，这个true如果是放在.env中不能直接给process.env.ELECTRON_NODE_INTEGRATION=true，那样，调到的是字符串，不是布尔值，会出现下面的报错：

Uncaught TypeError: window.require is not a function
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/App.vue?vue&type=script&lang=js& (App.vue:22)
    at __webpack_require__ (bootstrap:853)
    at fn (bootstrap:150)
    at Module../src/App.vue?vue&type=script&lang=js& (App.vue?c53a:1)
    at __webpack_require__ (bootstrap:853)
    at fn (bootstrap:150)
    at Module../src/App.vue (App.vue:1)
    at __webpack_require__ (bootstrap:853)
    at fn (bootstrap:150)
    at Module../src/main.js (HelloWorld.vue?adfd:1)