开源vue-plugin-hiprint 只能调起浏览器系统打印，根本不能socket.io客户端直接打印_vue.use(vuepluginhiprint) 出问题

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

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

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

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'
  export default {
    name: 'Labs',
    // import引入的组件需要注入到对象中才能使用
    components: {},
    // 父组件传递值
    props: {
    },
    data() {
      // 这里存放数据
      return {
      hiprintTemplate: {}
      }
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      this.init()
    },
    // 方法集合
    methods: {
        // 初始化
      init() {
        // 初始化 全局打印对象，建议使用 局部声明，不要用全局变量 多次打印有问题
        const hiprintTemplate_ = new hiprint.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_ = new hiprint.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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

以上代码运行后 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打包出来的，里面代码估计是因为开源的，所以屏蔽掉了 静默打印，要真这样的话，太狗了，浪费大家时间。

测试环境: win11+electron-hiprint客户端+chrome

vue-plugin-hiprint 的演示站可以正常静默打印，说明electron-hiprint客户端没有问题

使用这个网站测试，electron-hiprint客户端 能收到数据

https://ccsimple.gitee.io/vue-plugin-hiprint/



虽然开源不等于免费，但也没见放个收款码