经过调试,最终解决办法是:vue项目public\index.html 加入
<link rel="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'
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>
以上代码运行后 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/
虽然开源不等于免费,但也没见放个收款码