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

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

news 2026/2/10 16:33:26

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

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

编程新知 2025/10/22 11:16:20

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

编程新知 2026/2/7 19:53:11

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2026/2/1 19:26:16

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2026/2/7 8:31:55

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

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

编程新知 2025/11/30 10:30:15

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2026/1/31 9:33:18

HDFS分布式存储 zookeeper

hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架&#xff0c;允许使用简单的变成模型跨计算机对大型集群进行分布式处理&#xff08;1.海量的数据存储 2.海量数据的计算&#xff09;Hadoop核心组件 hdfs&#xff08;分布式文件存储系统&#xff09;&a…...

编程新知 2026/1/24 4:10:44

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

编程新知 2026/1/27 2:41:27

Git 3天2K星标：Datawhale 的 Happy-LLM 项目介绍（附教程）

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...

编程新知 2026/1/29 11:06:33

保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画！！！

目录 补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现 内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示 逐帧…...

编程新知 2026/2/4 3:31:19