插件地址: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.