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

news2025/1/1 10:00:20

代码地址是: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.coloradmin.cn/o/2267701.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Docker Container 可观测性最佳实践

Docker Container 介绍 Docker Container&#xff08; Docker 容器&#xff09;是一种轻量级、可移植的、自给自足的软件运行环境&#xff0c;它在 Docker 引擎的宿主机上运行。容器在许多方面类似于虚拟机&#xff0c;但它们更轻量&#xff0c;因为它们不需要模拟整个操作系统…

GXUOJ-算法-第二次作业

1.矩阵连&#xff08;链&#xff09;乘 问题描述 GXUOJ | 矩阵连乘 代码解答 #include<bits/stdc.h> using namespace std;const int N50; int m[N][N]; int p[N]; int n;int main(){cin>>n;//m[i][j] 存储的是从第 i 个矩阵到第 j 个矩阵这一段矩阵链相乘的最小…

OpenCV计算机视觉 02 图片修改 图像运算 边缘填充 阈值处理

目录 图片修改&#xff08;打码、组合、缩放&#xff09; 图像运算 边缘填充 ​阈值处理 上一篇文章&#xff1a; OpenCV计算机视觉 01 图像与视频的读取操作&颜色通道 图片修改&#xff08;打码、组合、缩放&#xff09; # 图片打码 import numpy as np a cv2.imre…

不修改内核镜像的情况下,使用内核模块实现“及时”的调度时间片超时事件上报

一、背景 之前的博客 不修改内核镜像的情况下&#xff0c;使用内核模块实现高效监控调度时延-CSDN博客 里&#xff0c;我们讲了不修改内核镜像高效监控每次的调度时延的方法。这篇博客里&#xff0c;我们对于调度时间片也做这么一个不修改内核镜像的改进。关于调度时间片过长的…

Flink定时器

flink的定时器都是基于事件时间&#xff08;event time&#xff09;或事件处理时间&#xff08;processing time&#xff09;的变化来触发响应的。对一部分新手玩家来说&#xff0c;可能不清楚事件时间和事件处理时间的区别。我这里先说一下我的理解&#xff0c;防止下面懵逼。…

使用 OpenCV 绘制线条和矩形

OpenCV 是一个功能强大的计算机视觉库&#xff0c;它不仅提供了丰富的图像处理功能&#xff0c;还支持图像的绘制。绘制简单的几何图形&#xff08;如线条和矩形&#xff09;是 OpenCV 中常见的操作。在本篇文章中&#xff0c;我们将介绍如何使用 OpenCV 在图像上绘制线条和矩形…

【Artificial Intelligence篇】AI 前沿探秘:开启智能学习的超维征程

目录 一、人工智能的蓬勃发展与智能学习的重要性: 二、数据的表示与处理 —— 智能学习的基石: 三、构建一个简单的感知机模型 —— 智能学习的初步探索: 四、神经网络 —— 开启超维征程的关键一步: 五、超维挑战与优化 —— 探索智能学习的深度: 六、可视化与交互 —— …

大数据的尽头是数据中台吗?

大数据的尽头是数据中台吗&#xff1f; 2018年末开始&#xff0c;原市场上各种关于大数据平台的招标突然不见&#xff0c;取而代之的是数据中台项目&#xff0c;建设数据中台俨然成为传统企业数字化转型首选&#xff0c;甚至不少大数据领域的专家都认为&#xff0c;数据中台是…

珞珈一号夜光遥感数据地理配准,栅格数据地理配准

目录 一、夜光数据下载&#xff1a; 二、夜光遥感数据地理配准 三、计算夜光数据值 四、辐射定标 五、以表格显示分区统计 五、结果验证 夜光数据位置和路网位置不匹配&#xff0c;虽然都是WGS84坐标系&#xff0c;不匹配&#xff01;&#xff01;&#xff01;不要看到就直接…

3.若依前端项目拉取、部署、访问

因为默认RuoYi-Vue是使用的Vue2,所以需要另外去下载vue3来部署。 拉取代码 git clone https://gitee.com/ys-gitee/RuoYi-Vue3.git 安装node才能执行npm相关的命令 执行命令npm install 如果npm install比较慢的话&#xff0c;需要添加上国内镜像 npm install --registrhttp…

【Java】线程相关面试题 (基础)

文章目录 线程与进程区别并行与并发区别解析概念含义资源利用执行方式应用场景 创建线程线程状态如何保证新建的三个线程按顺序执行wait方法和sleep方法的不同所属类和使用场景方法签名和参数说明调用wait方法的前提条件被唤醒的方式与notify/notifyAll方法的协作使用示例注意事…

手机租赁平台开发全攻略打造高效便捷的租赁服务系统

内容概要 手机租赁平台开发&#xff0c;简单说就是让用户能轻松租赁各类手机的高效系统。这一平台不仅帮助那些想要临时使用高端手机的人们节省了不少资金&#xff0c;还为商家开辟了新的收入渠道。随着智能手机的普及&#xff0c;很多人并不需要长期拥有一部手机&#xff0c;…

【视觉惯性SLAM:十一、ORB-SLAM2:跟踪线程】

跟踪线程是ORB-SLAM2的核心之一&#xff0c;其主要任务是实时跟踪相机的位姿变化和场景的变化&#xff0c;以维持地图的更新和相机轨迹的估计。ORB-SLAM2的跟踪线程通过多种方式&#xff08;参考关键帧跟踪、恒速模型跟踪、重定位跟踪、局部地图跟踪&#xff09;处理跟踪丢失、…

浙江肿瘤医院病理库存储及NAS共享存储(磁盘阵列)方案-Infortrend普安科技

Infortrend金牌代理-燊通智联信息科技发展&#xff08;上海&#xff09;有限公司与院方多轮沟通&#xff0c;详细讨论性能与容量要求&#xff0c;最终决定采用GSe统一存储设备&#xff0c;与现有病理系统服务器无缝对接&#xff0c;每台设备配1.92T SSD作缓存加速原数据读写&am…

解决GPT公式复制到Word之后乱码问题

chat辅助确实很有用。不论是出文稿还是代码。如何把chatgpt中的公式直接复制到word中且保持原样格式呢&#xff1f;下面的方法经过我的验证确实好用&#xff0c;成功解决了最近的论文报告写公式的问题。 一、首先复制chatgpt里面的公式 二、粘贴在下面网站 网站&#xff1a;Mat…

Spring Boot教程之四十:使用 Jasypt 加密 Spring Boot 项目中的密码

如何使用 Jasypt 加密 Spring Boot 项目中的密码 在本文中&#xff0c;我们将学习如何加密 Spring Boot 应用程序配置文件&#xff08;如 application.properties 或 application.yml&#xff09;中的数据。在这些文件中&#xff0c;我们可以加密用户名、密码等。 您经常会遇到…

Quartz任务调度框架实现任务动态执行

说明&#xff1a;之前使用Quartz&#xff0c;都是写好Job&#xff0c;指定一个时间点&#xff0c;到点执行。最近有个需求&#xff0c;需要根据前端用户设置的时间点去执行&#xff0c;也就是说任务执行的时间点是动态变化的。本文介绍如何用Quartz任务调度框架实现任务动态执行…

Scala_【1】概述

第一章 语言特点环境搭建(Windows)idea编写scalaHelloWorld注意事项 Scala是一门以Java虚拟机&#xff08;JVM&#xff09;为运行环境并将面向对象和函数式编程的最佳特性结合在一起的静态类型编程语言 语言特点 Scala是一门多范式的编程语言&#xff0c;Scala支持面向对象和函…

StableAnimator模型的部署:复旦微软提出可实现高质量和高保真的ID一致性人类视频生成

文章目录 一、项目介绍二、项目部署模型的权重下载提取目标图像的关节点图像&#xff08;这个可以先不看先用官方提供的数据集进行生成&#xff09;提取人脸&#xff08;这个也可以先不看&#xff09;进行图片的生成 三、模型部署报错 一、项目介绍 由复旦、微软、虎牙、CMU的…

最新高性能多目标优化算法:多目标麋鹿优化算法(MOEHO)求解LRMOP1-LRMOP6及工程应用---盘式制动器设计,提供完整MATLAB代码

一、麋鹿优化算法 麋鹿优化算法&#xff08;Elephant Herding Optimization&#xff0c;EHO&#xff09;是2024年提出的一种启发式优化算法&#xff0c;该算法的灵感来源于麋鹿群的繁殖过程&#xff0c;包括发情期和产犊期。在发情期&#xff0c;麋鹿群根据公麋鹿之间的争斗分…