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

本文主要是介绍uniapp项目使用vue-plugin-hiprint静默打印功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

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

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;

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

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

注：如果使用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 = truereturn}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, // 是否打印颜色 默认 truecopies: 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 = truethat.tipsMsg = '打印成功'that.$http.post('url',updata).then(res => {console.log(res,'打印成功之后提交信息');})});hiprintTemplate_.on('printError', function () {console.log('打印失败');that.tipsShow = truethat.tipsMsg = '打印失败'that.printType = true});}