vue 打印机直打通过打印代理服务

vue 浏览器打印直打

tyz9293

1133人浏览 · 2024-10-14 09:55:34

tyz9293 · 2024-10-14 09:55:34 发布

vue 打印机直打通过打印代理服务

1.安装依赖

npm i vue-plugin-hiprint

2.引入「打印样式」print-lock.css
在这里插入图片描述

  <!--【必须】在index.html 文件中添加打印所需样式-->
  <link rel="stylesheet" type="text/css" media="print" href="/css/print-lock.css">

3.全局挂载
在这里插入图片描述

import { hiPrintPlugin } from 'vue-plugin-hiprint'
app.use(hiPrintPlugin, '$hisPrint');
hiPrintPlugin.disAutoConnect(); // 取消自动连接直接打印客户端

4.在需要打印的地方调用打印服务
在这里插入图片描述

if (!hiprint.hiwebSocket.opened) {// 可以在打印的时候 连接客户端,也可以在main.js中设置初始化时就连接，那此处就不需要了
    hiprint.hiwebSocket.setHost("http://127.0.0.1:17521");
    hiprint.hiwebSocket.socket.on('connect_error', function(result) {// 监听打印服务连接失败 不进行重连操作
      ElMessage({
        message: '打印机连接失败,请检查打印服务是否开启！',
        type: 'error',
      });
      hiprint.hiwebSocket.socket.close();
    })
  }
  if(type == "preview"){//预览打印
    hiprint.hiwebSocket.send({printDialog:true,client:'HIS_REPORT_PRINT', printer:printerName, type: 'url_pdf', pdf_path: reportUrl })
  }else{//直接打印
    hiprint.hiwebSocket.send({client:'HIS_REPORT_PRINT', printer:printerName, type: 'url_pdf', pdf_path: reportUrl })
    hiprint.hiwebSocket.socket.on('success', function(result) {// 打印服务连接成功回调事件
      ElMessage({
        message: '打印完成!!!',
        type: 'success',
      });
      hiprint.hiwebSocket.socket.close();
    })
  }