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

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

news 2025/9/21 3:26:08

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

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

编程新知 2025/8/7 7:40:03

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

编程新知 2025/8/28 23:59:45

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

编程新知 2025/8/22 22:34:43

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/9/11 9:39:35

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

编程新知 2025/9/16 9:30:25

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

编程新知 2025/9/9 10:09:33

【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

编程新知 2025/9/2 18:28:40

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

编程新知 2025/7/9 6:12:46

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

编程新知 2025/9/1 17:56:35

MySQL 索引底层结构揭秘：B-Tree 与 B+Tree 的区别与应用

文章目录 一、背景知识&#xff1a;什么是 B-Tree 和 BTree&#xff1f; B-Tree&#xff08;平衡多路查找树&#xff09; BTree&#xff08;B-Tree 的变种&#xff09; 二、结构对比&#xff1a;一张图看懂 三、为什么 MySQL InnoDB 选择 BTree&#xff1f; 1. 范围查询更快 2…...

编程新知 2025/9/19 8:58:53