当前位置: 首页 > news >正文

hiprint结合vue2项目实现静默打印详细使用步骤

代码地址是:vue-plugin-hiprint: hiprint for Vue2/Vue3 ⚡打印、打印设计、可视化设计器、报表设计、元素编辑、可视化打印编辑

本地安装包地址:electron-hiprint 发行版 - Gitee.com

1、先安装hipint安装包在本地

2、项目运行npm(socket.io是为了实现自动打印下载的)

npm install vue-plugin-hiprint
npm i jquery --save-d
npm install socket.io

3、在main.js文件中

import {hiPrintPlugin} from 'vue-plugin-hiprint'
Vue.use(hiPrintPlugin, '$pluginName')import $ from "jquery";
window.jquery = window.$ = $;
Vue.prototype.$ = jquery

4、在node_modules包中找到print-lock.css样式文件复制到项目中

找到后复制到public文件夹

在public文件夹的index.html文件引入这个css文件(说是防止样式重叠使用的)

<!-- 引入vue-plugin-hiprint的样式 -->
<link rel="stylesheet" type="text/css" media="print" href="<%= BASE_URL %>print-lock.css"></link>
<link rel="stylesheet" type="text/css" media="print" href="https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@latest/dist/print-lock.css">

5、在页面的具体使用

print(){const styleStr = `<style>样式代码 </style>`;let hiprintTemplate = new this.$pluginName.PrintTemplate()Array.from(this.$refs.print).forEach(v=>{let panel = hiprintTemplate.addPrintPanel({ paperType:'A4',paperNumberDisabled:true})panel.addPrintHtml({options: {"left":15,"top":5, "content":`<html><head>${styleStr}</head><body>${v.innerHTML}</body> </html>` } })}) this.$message({message: '正在执行打印操作,请稍等……',type: 'success',offset:350});hiprintTemplate.print2()//直接静默打印//hiprintTemplate.print()  预览打印
}

6、在App.vue加上隐藏的样式,这样不影响页面样式

#hiwprint_iframe{display: none !important;
}

最后:一定要在启动了客户端的软件情况下点击打印按钮,不然会报错未连接客户端!

http://www.lryc.cn/news/510614.html

相关文章:

  • 项目报 OutOfMemoryError 、GC overhead limit exceeded 问题排查以及解决思路实战
  • 【计算机-显示屏灰阶测试】
  • CSS系列(40)-- Container Queries详解
  • 工作生活做事慢效率低原因及解决方案
  • 各种数据库类型介绍
  • 了解智能运维
  • js实现仿windows文件名称排序
  • 基于Oauth2的SSO单点登录---前端
  • springboot 使用注解设置缓存时效
  • QGIS二次开发(地图符号库操作)
  • 线性代数行列式
  • Vision Transformer (ViT) 论文的第二句话
  • Github 2024-12-27 Java开源项目日报Top10
  • 气相色谱-质谱联用分析方法中的常用部件,分流平板更换
  • centos7 免安装mysql5.7及配置(支持多个mysql)
  • Python的Pandas--Series的创建和实现
  • OCR实践-问卷表格统计
  • uniapp中的条件编译
  • Segment Routing Overview
  • 【K8s】专题十五(6):Kubernetes 网络之 Pod 网络调试
  • CMake 构建项目并整理头文件和库文件
  • Boost之log日志使用
  • 多功能jquery图片预览放大镜插件
  • CSS系列(39)-- Shapes详解
  • AI 神经网络在智能家居场景中的应用
  • Rocky DEM tutorial7_Conical Dryer_锥形干燥器
  • CSS(二):美化网页元素
  • 平方根无迹卡尔曼滤波(SR-UKF)算法,用于处理三维非线性状态估计问题
  • 【论文笔记】Visual Alignment Pre-training for Sign Language Translation
  • NLP基础知识 - 向量化