开源vue-plugin-hiprint 只能调起浏览器系统打印，根本不能socket.io客户端直接打印

经过调试，最终解决办法是：vue项目public\index.html 加入

<linkrel="stylesheet"type="text/css"media="print"href="<%= BASE_URL %>/print-lock.css?v=1.0.0">

不重叠了、也能静默打印了，文档没有研究明白，技术太菜，大家伙原谅下。

index.vue demo代码

<template><div><button @click="getPrinterList">获取打印机列表</button><button @click="confirmPrintPrint">打印</button><div id="printDiv" style="display: none;"><!-- 这里打印内容 style 内容大小一定要小于 实际纸张大小，如果打印的纸张够大 可以忽略 --><div style="zoom: 1.1;display: inline-block;width: 18mm;height: 7mm;margin-left: 5px;"><img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAA-太长了，自己随便找图转换一下" style="width: 100%; height: 100%;"></div></div></div></template><script>import{ hiprint,defaultElementTypeProvider }from'vue-plugin-hiprint'exportdefault{name:'Labs',// import引入的组件需要注入到对象中才能使用components:{},// 父组件传递值props:{},data(){// 这里存放数据return{hiprintTemplate:{}}},// 监听属性 类似于data概念computed:{},// 监控data中的数据变化watch:{},// 生命周期 - 创建完成（可以访问当前this实例）created(){},// 生命周期 - 挂载完成（可以访问DOM元素）mounted(){this.init()},// 方法集合methods:{// 初始化init(){// 初始化 全局打印对象，建议使用 局部声明，不要用全局变量 多次打印有问题const hiprintTemplate_ =newhiprint.PrintTemplate()this.hiprintTemplate = hiprintTemplate_
      },// 获取打印机列表getPrinterList(){if(window.hiwebSocket.opened ===false){alert('打印机客户端未连接')}// 模板对象获取const printerList_ =this.hiprintTemplate.getPrinterList()
        console.info(printerList_)},// 使用 hiPrintPlugin 控件打印confirmPrintPrint(){// 如果在 main.js 中设置了取消自动连接客户端 是获取不到打印机列表的！！！if(window.hiwebSocket.opened ===false){alert('打印机客户端未连接，请点击右上角头像下载打印客户端')}// 这一句代码 如果打印出来有问题 可以尝试加进去，没有出现 则不用加// 初始化 provider
        hiprint.init({providers:[defaultElementTypeProvider()]})// 这一句代码 如果打印出来有问题 可以尝试加进去，没有出现 则不用加
        hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'))// 不要使用 this.hiprintTemplate 打印，会出现重复打印，如果要用，请每次打印 都清空内容const hiprintTemplate_ =newhiprint.PrintTemplate()const panel = hiprintTemplate_.addPrintPanel({'height':9,'width':20,'paperHeader':0,'paperFooter':30,'paperNumberLeft':26,'paperNumberTop':6,'paperNumberDisabled':true,'orient':1,'scale':1})// 这一块代码是可以 放在 create 页面创建完成后 // 打印html内容
        panel.addPrintHtml({options:{width:20,height:9,top:0,left:0,content:$('#printDiv').html()}})// 预览打印//hiprintTemplate_.print()//  打印机列表const printerList = hiprintTemplate_.getPrinterList()
        console.info('打印机列表', printerList)// 直接打印 - 不带参数
        hiprintTemplate_.print2()// 直接打印 带参数// hiprintTemplate_.print2(null, {//     printer: '', // 指定打印机 打印机 名称//     title: '打印任务名称',//     color: false, // 是否打印颜色 默认 true//     copies: 1, // 打印份数 默认 1//   });}}}</script>

以上代码运行后 electron-hiprint客户端 - 也就是直接打印(不通过系统浏览器ctrl+p调出来的那个窗口)静默打印，这玩意 electron-hiprint客户端没有接收数据，研究2天没，试过各种demo,无法实现静默打印。

npm install vue-plugin-hiprint 这个依赖中在静默打印的时候，不会发socket.io打印数据出去。

所以不是你的代码问题，也不是 electron-hiprint 客户端的问题，问题分析:
项目路径下 node_modules\vue-plugin-hiprint\dist 里面
在这里插入图片描述
这个文件是由 vue-plugin-hiprint build出来的，而 vue-plugin-hiprint 源码中包含封装打包过的 hiprint.js，网址：hiprint.io ：

hiprint.bundle.js 这个文件又是webbpack打包出来的，里面代码估计是因为开源的，所以屏蔽掉了静默打印，要真这样的话，太狗了，浪费大家时间。