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

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

news 2026/2/10 15:32:17

代码地址是：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;
}

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

相关文章：

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

代码地址是&#xff1a;vue-plugin-hiprint: hiprint for Vue2/Vue3 ⚡打印、打印设计、可视化设计器、报表设计、元素编辑、可视化打印编辑 本地安装包地址&#xff1a;electron-hiprint 发行版 - Gitee.com 1、先安装hipint安装包在本地 2、项目运行npm&#xff08;socket.…...

编程日记 2024/12/28 5:51:41

项目报 OutOfMemoryError 、GC overhead limit exceeded 问题排查以及解决思路实战

项目报 OutOfMemoryError、GC overhead limit exceeded 问题排查以及解决思路实战 前言&#xff1a; 问题现象描述&#xff1a; 1&#xff0c;生产环境有个定时任务&#xff0c;没有初始化告警数据【告警数据量为1000多个】 2&#xff0c;其他定时任务执行正常 3&#xff0c;查…...

编程日记 2024/12/28 5:47:31

【计算机-显示屏灰阶测试】

硬计算机-显示屏灰阶测试 ■ 对比度■ 清晰度■ 灰度色阶&#xff08;色带&#xff09;■ 对比率■■ ■ 对比度 在一个性能良好的显示器上&#xff0c;您可观察到每种颜色的标尺都可分为从 1 至 32、大致上等宽但不同亮度的色带。即使是在刻度1处的色带也应该隐约可见。 一个…...

编程日记 2024/12/28 5:46:30

CSS系列（40）-- Container Queries详解

前端技术探索系列&#xff1a;CSS Container Queries详解 &#x1f4e6; 致读者&#xff1a;探索组件响应式的艺术 &#x1f44b; 前端开发者们&#xff0c; 今天我们将深入探讨 CSS Container Queries&#xff0c;这个强大的组件级响应式特性。 基础概念 &#x1f680; 容…...

编程日记 2024/12/28 5:45:25

工作生活做事慢效率低原因及解决方案

时间和效率管理具体版&#xff08;初阶&#xff09;&#xff08;一&#xff09; 工作&生活做事慢效率低原因及解决方案 一、效率慢的原因&#xff08;动物解析法&#xff08;编者自创&#xff09;&#xff09; 打败你的可能是生活的小事 1.无头苍蝇无流程 做事之前没有想…...

编程日记 2024/12/28 5:44:23

各种数据库类型介绍

在软件开发和数据处理领域&#xff0c;数据库扮演着至关重要的角色。它们用于存储、检索和管理大量数据&#xff0c;是信息系统不可或缺的基础。以下是几种常用的数据库类型及其简要介绍&#xff1a; 1.关系型数据库&#xff08;Relational Databases&#xff09; 关系型数据库…...

编程日记 2024/12/28 5:42:21

了解智能运维

智能运维 &#xff08;一&#xff09;运维工作的转变 随着技术发展&#xff0c;运维工作从基础的搬机器、插网线、装系统等体力活儿&#xff0c;逐渐转变为更侧重服务器管理、代码管理、日志分析、监控告警、流量管理及故障排查等的脑力劳动。如今&#xff0c;运维人员拿到的…...

编程日记 2024/12/28 5:41:20

js实现仿windows文件名称排序

引言&#xff1a; 在JavaScript中&#xff0c;数组排序是一个常见的操作&#xff0c;但默认的Array.sort()方法只能进行简单的字符串比较。在处理复杂数据时&#xff0c;我们需要自定义排序函数来满足特定的需求。本文将通过一个具体的代码示例&#xff0c;解释如何实现一个仿w…...

编程日记 2024/12/28 5:39:19

基于Oauth2的SSO单点登录---前端

Vue-element-admin 是一个基于 Vue.js 和 Element UI 的后台管理系统框架&#xff0c;提供了丰富的组件和功能&#xff0c;可以帮助开发者快速搭建现代化的后台管理系统。 一、基本知识 &#xff08;一&#xff09;Vue-element-admin 的主要文件和目录 vue-element-admin/ |--…...

编程日记 2024/12/28 5:38:17

springboot 使用注解设置缓存时效

springboot 使用注解设置缓存时效 import org.apache.commons.lang3.StringUtils; import org.springframework.data.redis.cache.RedisCache; import org.springframework.data.redis.cache.RedisCacheConfiguration; import org.springframework.data.redis.cache.RedisCach…...

编程日记 2024/12/28 5:37:14

QGIS二次开发（地图符号库操作）

实习三 地图符号库操作 3.1 任务要求 基于QGIS&#xff0c;实现地图符号的设计/存储与显示&#xff1b;基于QGIS实现一个点、线、面shp矢量图层文件的显示。通过设置引用的符号&#xff0c;改变矢量图层的显示效果&#xff1b;可编辑地图的符号库汇中的点符号、线符号、面符号…...

编程日记 2024/12/28 5:36:12

线性代数行列式

目录 二阶与三阶行列式 二元线性方程组与二阶行列式 三阶行列式 全排列和对换 排列及其逆序数 对换 n阶行列式的定义 行列式的性质 二阶与三阶行列式 二元线性方程组与二阶行列式 若是采用消元法解x1、x2的话则得到以下式子 有二阶行列式的规律可得&#xff1a;分…...

编程日记 2024/12/28 5:34:11

Vision Transformer (ViT) 论文的第二句话

Vision Transformer (ViT) 论文的第二句话 flyfish 原句&#xff1a; “In vision, attention is either applied in conjunction with convolutional networks, or used to replace certain components of convolutional networks while keeping their overall structure in…...

编程日记 2024/12/28 5:29:05

Github 2024-12-27 Java开源项目日报Top10

根据Github Trendings的统计，今日(2024-12-27统计)共有10个项目上榜。根据开发语言中项目的数量，汇总情况如下： 开发语言项目数量Java项目9Kotlin项目1C#项目1非开发语言项目1C++项目1《Hello 算法》：动画图解、一键运行的数据结构与算法教程 创建周期：476 天协议类型：Ot…...

编程日记 2024/12/28 5:28:04

气相色谱-质谱联用分析方法中的常用部件，分流平板更换

分流平板&#xff0c;是气相色谱-质谱联用分析方法中的一个常用部件&#xff0c;它可以实现气相色谱柱流与MS检测器流的分离和分流。常见的气质联用仪分流平板有很多种&#xff0c;如单层T型分流平板、双层T型分流平板、螺旋分流平板等等。 操作视频http://www.spcctech.com/v…...

编程日记 2024/12/28 5:27:03

centos7 免安装mysql5.7及配置（支持多个mysql）

一&#xff09; 下载免安装包&#xff1a; mysql下载地址: https://dev.mysql.com/downloads/mysql/下载时&#xff0c;选择以前5.7版本&#xff1a; image 下载第一个TAR压缩包&#xff1a; image 二&#xff09; 定义安装路径并解压安装包 1、假设需要把MySQL放到 /usr/local…...

编程日记 2024/12/28 5:25:01

Python的Pandas--Series的创建和实现

1.Series函数的格式&#xff1a; pandas.Series(data,index,dtype,name,copy) data&#xff1a;一组数据&#xff08;ndarray类型、list、dict等类&#xff09;或标量值 index&#xff1a;数据索引标签。如果不指定&#xff0c;默认为整数&#xff0c;从0开始 dtype&#x…...

编程日记 2024/12/28 5:23:59

OCR实践-问卷表格统计

前言 书接上文 OCR实践—PaddleOCROCR实践-Table-Transformer 本项目代码已开源 放在 Github上&#xff0c;欢迎参考使用&#xff0c;Star https://github.com/caibucai22/TableAnalysisTool 主要功能说明&#xff1a;对手动拍照的问卷图片进行统计分数&#xff08;对应分数…...

编程日记 2024/12/28 5:22:56

uniapp中的条件编译

在script中 // #ifdef APP-PLUS console.log("11"); // #endif// #ifdef MP-WEIXIN console.log("22"); // #endif 在template中 <!-- #ifdef APP-PLUS --><view>哈哈哈</view> <!-- #endif --><!-- #ifdef MP-WEIXIN -->…...

编程日记 2024/12/28 5:21:53

Segment Routing Overview

大家觉得有意义和帮助记得及时关注和点赞!!! Segment Routing (SR) 是近年来网络领域的一项新技术&#xff0c;“segment” 在这里 指代网络隔离技术&#xff0c;例如 MPLS。如果快速回顾网络设计在过去几十年的 发展&#xff0c;我们会发现 SR 也许是正在形成的第三代网络设计…...

编程日记 2024/12/28 5:19:52

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2026/2/8 3:54:15

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

编程新知 2025/9/11 15:27:32

聊一聊接口测试的意义有哪些？

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

编程新知 2026/2/10 2:11:49

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2026/2/4 18:07:02

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

编程新知 2025/9/24 3:05:06

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变（硬件篇）

本项目是基于 STM32F103C8T6 微控制器的 SPWM（正弦脉宽调制）电源模块，能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路，图中 D1 为二极管， 其目的是防止正负极电源反接， …...

编程新知 2026/1/25 3:29:22

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/11/18 18:31:30

PHP 8.5 即将发布：管道操作符、强力调试

前不久&#xff0c;PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5&#xff01;作为 PHP 语言的又一次重要迭代&#xff0c;PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是&#xff0c;借助强大的本地开发环境 ServBay&am…...

编程新知 2026/1/31 8:53:50

系统掌握PyTorch：图解张量、Autograd、DataLoader、nn.Module与实战模型

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文通过代码驱动的方式&#xff0c;系统讲解PyTorch核心概念和实战技巧&#xff0c;涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...

编程新知 2026/2/7 23:15:50

若依登录用户名和密码加密

/*** 获取公钥&#xff1a;前端用来密码加密* return*/GetMapping("/getPublicKey")public RSAUtil.RSAKeyPair getPublicKey() {return RSAUtil.rsaKeyPair();}新建RSAUti.Java package com.ruoyi.common.utils;import org.apache.commons.codec.binary.Base64; im…...

编程新知 2026/1/22 11:27:07