uniapp项目 使用vue-plugin-hiprint静默打印功能_vue-plugin-hiprint uniapp

插件地址：https://toscode.mulanos.cn/gyy155/vue-plugin-hiprint
h5项目使用插件的静默打印功能
1.下载vue-plugin-hiprint和jquery

npm install vue-plugin-hiprint
npm install jquery --save
1
2

2.在mian.js引入插件和jqerry

//引入vue-plugin-hiprint
import { hiPrintPlugin } from 'vue-plugin-hiprint'
// hiPrintPlugin.disAutoConnect() // 取消自动连接直接打印客户端，如果设置了取消自动连接，后续是获取不到打印机列表的
Vue.use(hiPrintPlugin, '$pluginName')

//引入jquery
import jquery from "jquery";
Vue.prototype.$ = jquery;
1
2
3
4
5
6
7
8

3.【必须】在index.html 文件中添加打印所需样式（需要在manifest.json中增加index.html模板路径，否则不生效）

<link rel="stylesheet" type="text/css" media="print" href="./static/print-lock.css" />
1

注：如果使用ui框架可能会导致样式错乱等问题，我是使用uview框架样式不生效，把样式重新复制一份到uview-ui中的libs→css→h5.scss里即可
4.使用静默打印功能

			// 初始化
			init() {
				  // 初始化 打印对象
				  const hiprintTemplate_ = new this.$pluginName.PrintTemplate()
				  console.log(hiprintTemplate_);
				  this.hiprintTemplate = hiprintTemplate_
			},

			// 使用 hiPrintPlugin 控件打印
			confirmPrintPrint() {
			let that = this
			 // 如果在 main.js 中设置了取消自动连接客户端 是获取不到打印机列表的！！！
			 if (window.hiwebSocket.opened === false) {
				this.show = true
				return
			  }
			  this.printType = false
			  // 这一句代码 如果打印出来有问题 可以尝试加进去，没有出现 则不用加
			  // this.$pluginName.PrintElementTypeManager.buildByHtml(this.$('.ep-draggable-item')) 
			  // 清空原内容
			  // this.$('#printDivXm3').empty()
		
			  const hiprintTemplate_ = new this.$pluginName.PrintTemplate({
				template: JSON.parse(this.templateJson)
			  })
		
			  // 挂载打印内容
			  // hiprintTemplate_.design('#printDivXm3')
		
			  // 打印数据，要和 上面 panel 内的 field 参数一致
			  const printData = {
				document_number: '1222222',
				order_id: '111111',
				name: '用户名',
				address: '用暖地址3',
				area: '交费面积4',
				money: '11233',
				delivery_type: '交费方式',
				delivery_time: '2024-05-23',
				payer: '收费人员',
			  }
			  
			  // 预览打印
			  // hiprintTemplate_.print(printData)
			  
			 // 直接打印 带参数
			  hiprintTemplate_.print2(printData, {
				  printer: '', // 指定打印机 打印机 名称
				  title: '打印任务名称',
				  color: true, // 是否打印颜色 默认 true
				  copies: 1, // 打印份数 默认 1
				});
				
				let updata = {
					payType:this.infodata.payType,
					blockState:this.infodata.blockState,
					stopFlg:this.infodata.stopFlg,
					community:this.infodata.community,
					customerId:this.infodata.id,
					terminalName:'自助机',
					tag:this.infodata.tag
				}
				
				hiprintTemplate_.on('printSuccess', function () {
					console.log('打印成功');
					that.tipsShow = true
					that.tipsMsg = '打印成功'
	that.$http.post('url',updata).then(res => {
						console.log(res,'打印成功之后提交信息');
					})
				});
				hiprintTemplate_.on('printError', function () {
					console.log('打印失败');
					that.tipsShow = true
					that.tipsMsg = '打印失败'
					that.printType = true
				});
			}
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