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

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

news 2026/4/3 7:23:33

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

支持RTX 30/40系显卡：PyTorch-2.x-Universal-Dev-v1.0镜像GPU验证指南

支持RTX 30/40系显卡&#xff1a;PyTorch-2.x-Universal-Dev-v1.0镜像GPU验证指南 1. 引言&#xff1a;为什么需要验证GPU环境 在深度学习项目开发中&#xff0c;GPU加速是提升模型训练效率的关键因素。特别是对于RTX 30/40系列显卡用户&#xff0c;正确配置CUDA环境与PyTorc…...

编程新知 2026/4/3 6:45:51

intv_ai_mk11效果实测：技术面试题生成能力——覆盖算法/系统设计/行为问题

intv_ai_mk11效果实测&#xff1a;技术面试题生成能力——覆盖算法/系统设计/行为问题 1. 测试背景与模型介绍 intv_ai_mk11是一款基于Llama架构的AI对话助手&#xff0c;拥有7B参数规模&#xff0c;专门针对技术场景进行了优化。本次测试聚焦于其在技术面试题生成方面的能力…...

编程新知 2026/4/3 6:13:10

用LingBot-Depth解决实际问题：如何修复不完整的深度传感器数据？

用LingBot-Depth解决实际问题&#xff1a;如何修复不完整的深度传感器数据&#xff1f; 1. 深度传感器数据修复的挑战 深度传感器在机器人导航、三维重建和增强现实等领域发挥着关键作用&#xff0c;但原始传感器数据往往存在各种问题&#xff1a; 数据缺失&#xff1a;由于…...

编程新知 2026/4/3 5:54:59

Pixel Couplet Gen步骤详解：从输入愿望到生成可分享像素春联的完整链路

Pixel Couplet Gen步骤详解&#xff1a;从输入愿望到生成可分享像素春联的完整链路 1. 项目概览 Pixel Couplet Gen是一款融合传统春节文化与现代像素艺术风格的AI春联生成工具。通过ModelScope大模型驱动&#xff0c;它将用户的文字愿望转化为具有8-bit游戏视觉特色的数字春…...

编程新知 2026/4/3 5:42:49

PyTorch 3.0静态图训练突然降速37%？紧急排查清单：CUDA Graph复用失效、TensorPipe通道泄漏、以及被隐藏的TORCH_COMPILE_DEBUG=1黄金日志开关

第一章&#xff1a;PyTorch 3.0静态图分布式训练性能骤降的典型现象与影响评估近期多个生产级训练集群反馈&#xff0c;在升级至尚未正式发布的 PyTorch 3.0 预览版&#xff08;基于 TorchDynamo AOTAutograd 的全静态图编译路径&#xff09;后&#xff0c;使用 torch.distrib…...

编程新知 2026/4/3 5:32:32

Qwen3.5-35B-A3B-AWQ-4bit多模态落地：智慧医疗影像报告图关键指标自动提取

Qwen3.5-35B-A3B-AWQ-4bit多模态落地&#xff1a;智慧医疗影像报告图关键指标自动提取 1. 医疗影像分析的痛点与解决方案 医疗影像报告分析一直是临床工作中的重要环节。传统方式依赖医生人工查看影像并提取关键指标&#xff0c;存在以下问题&#xff1a; 效率低下&#xff…...

编程新知 2026/4/3 5:28:24

效率提升：用快马ai加速openclaw在ubuntu上的抓取方案寻优与评估

最近在做一个机器人抓取优化的项目&#xff0c;需要在Ubuntu系统上使用OpenClaw库来实现高效的物体抓取方案。整个过程涉及到抓取位姿生成、稳定性评估和碰撞检测等多个环节&#xff0c;手动编码调试起来特别耗时。后来尝试用InsCode(快马)平台的AI辅助功能&#xff0c;发现能大…...

编程新知 2026/4/3 5:16:11

开发者专属：OpenClaw调用Qwen3-14B完成API自动化测试

开发者专属&#xff1a;OpenClaw调用Qwen3-14B完成API自动化测试 1. 为什么选择OpenClaw做API测试自动化 去年接手一个金融数据平台项目时&#xff0c;我遇到了API测试的瓶颈——每次迭代需要手动执行200个Postman测试用例&#xff0c;还要人工核对返回结果。这种重复劳动不仅…...

编程新知 2026/4/3 4:11:19

一键切换模型：OpenClaw同时管理多个SecGPT-14B实例

一键切换模型&#xff1a;OpenClaw同时管理多个SecGPT-14B实例 1. 为什么需要管理多个模型实例 去年我在搭建本地AI安全分析系统时&#xff0c;遇到了一个典型困境&#xff1a;当SecGPT-14B模型需要版本升级时&#xff0c;整个服务必须停机。更糟的是&#xff0c;有次模型推理…...

编程新知 2026/4/3 4:01:15

电机轴承异响？5分钟教你用振动分析仪定位故障（附实测案例）

电机轴承异响诊断实战&#xff1a;振动分析仪操作全流程解析 轴承异响是工业现场最常见的电机故障之一&#xff0c;但很多维护工程师面对"嗡嗡"声或"咔嗒"响往往无从下手。上周某化工厂的水泵电机就因轴承早期磨损未被及时发现&#xff0c;导致整机报废&am…...

编程新知 2026/4/3 3:16:42