vue-plugin-hiprint 打印 预览打印+静默打印

1.安装
npm install vue-plugin-hiprint
npm i socket.io-client --save //为了静默打印 (为此还需安装客户端)

2…html页面 引入css

<link rel="stylesheet" type="text/css" media="print" href="https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@latest/dist/print-lock.css">
<!-- 可以调整成 相对链接/自有链接, 【重要】名称需要一致 【print-lock.css】-->
<link rel="stylesheet" type="text/css" media="print" href="/src/assets/styles/print-lock.css">

3.main.js引入或者按需应用

// 全局引用:
import {hiPrintPlugin,defaultElementTypeProvider } from 'vue-plugin-hiprint'
Vue.use(hiPrintPlugin, '$pluginName')
Vue.use(defaultElementTypeProvider, '$defaultElementTypeProvider')
hiPrintPlugin.disAutoConnect(); // 取消自动连接直接打印客户端
import '@/assets/styles/hiprint.css' // 自定义 css

4。你要打印的页面引用

<template><div ref="filePath" id="printDiv" ><div v-for="(item,index) in filePath" :key="index"><div :ref="'filePath'+index">我的打印内容;{{item}}</div></div></div>
</template>
<script>//为了静默打印  import {io} from "socket.io-client";export default {data() {return {ids:[],//存储获取的idhiprintTemplate: '',filePath: [],socket:''}},created() {//为了静默打印  //连接静默打印客户端this.socket = io("http://192.168.13.16:17521", {transports: ["websocket"],auth: {token: "vue-plugin-hiprint", // 在此处填入你 client 设置的 token,缺省可留空}})//打印const hiprintTemplate_ = new this.$pluginName.PrintTemplate()this.hiprintTemplate = hiprintTemplate_},methods: {handlePrints(row) {let that = thisconst ids = that.ids;//这是我的后端接口downloadOneReimbursement(ids).then(res => {that.filePath = res.data.url //我这是一个数组,后端给的地址,我通过在线地址展示成div})//这里是设置css 的  可以不用要--开始that.$confirm('是否选择' + this.ids.length + '条数据进行打印?', "警告", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning"}).then(function() {var elem = document.getElementsByClassName('docx-wrapper');for (var i = 0; i < elem.length; i++) {elem[i].style.padding = '0'elem[i].style.marginBottom = '0'}// elem.style.padding='0'// 假设我们有多个class为'my-class'的元素var elements = document.getElementsByClassName('docx');// 遍历这些元素并设置样式for (var i = 0; i < elements.length; i++) {elements[i].style.padding = '15pt 60px';elements[i].style.minHeight = '95vh';elements[i].style.height = 'auto';elements[i].style.boxShadow = '0 0 0 0 #fff'}var elements2 = document.getElementsByTagName('article');for (var i = 0; i < elements2.length; i++) {elements2[i].style.margin = '0 auto'}})这里是设置css 的  可以不用要--结束//直接打印其实就是将填充完数据的html 通过socket.io连接发送到直接打印客户端setTimeout(function() {that.$confirm('是否立即打印?', "警告", {confirmButtonText: "预览打印",cancelButtonText: "静默打印",type: "warning"}).then(function() {//预览打印that.hiprintTemplate.printByHtml(that.$refs.filePath, {})}).catch(() => {//静默打印that.filePath.forEach((item,index)=>{let ins='filePath'+index//获取htmllet html=that.$refs[ins][0].outerHTMLthat.socket.emit("news", {html,pageSize:'A4',printBackground:false});})});}, 400)},}}</script>

5安装客户端
https://gitee.com/CcSimple/electron-hiprint/releases
下载相应的客户端

安装打印客户端
请添加图片描述
请添加图片描述

如果要实现无预览打印(静默打印)就需要安装打印客户端, 无预览打印的原理是使用 hiprint 的打印客户端,它是一个基于 electron 的桌面应用,可以接收来自浏览器的打印请求,然后直接调用本地打印机进行打印。
安装地址:https://gitee.com/CcSimple/electron-hiprint/releases
问题
请添加图片描述

如果在配置客户端时遇到一下问题

解决方法
请添加图片描述

然后就可以使用啦!
补充
请添加图片描述

在使用客户端打印时如果我们的入口文件index.html中有这样的内容

在使用打印时会一同打印出来

解决方法 (在不动原代码的情况下最简单的方法)

参考地址
[1]: https://github.com/CcSimple/electron-hiprint
[2]: https://gitee.com/CcSimple/electron-hiprint
https://www.cnblogs.com/sexintercourse/p/17085140.html
https://mp.weixin.qq.com/s/4N4f7CkxodA-fuTJ_FbkOQ
https://developer.aliyun.com/article/1011031

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/50488.shtml

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

相关文章

创新大赛中财务预测的策略与技巧

创新大赛中财务预测的策略与技巧 前言财务预测的重要性财务预测的步骤财务预测的关键要素注意事项结语 前言 在当今快节奏、竞争激烈的商业环境中&#xff0c;创新不仅是推动企业成长的动力&#xff0c;更是衡量一个项目能否在市场中脱颖而出的关键。创新大赛作为展示这些创新成…

星耀巴黎,竞猜有礼!为运动健儿加油,让世界看见中国力量

即将高燃来袭首金荣耀&#xff0c;让我们拭目以待&#xff01; 当象征着“更快、更高、更强”的号角再次吹响&#xff0c;谁又能在这场全球瞩目的体育盛宴中&#xff0c;率先触碰那份至高无上的荣耀&#xff1f;“首金”不仅是一个国家或地区体育实力的象征&#xff0c;更是运…

1台solidworks图形工作站同时给5人一起使用

在日益发展的科技环境中&#xff0c;团队协作已成为各个行业不可或缺的一一部分。对于工程设计和图形处理领域而言&#xff0c;SolidWorks等强 大的三维建模和仿真软件成为了日常工作的重要工具。 随着团队规模的扩大和项目复杂性的增加&#xff0c;如何高效、稳定地为多人提供…

Java入门:05.Java中的数组002

通过上篇文章&#xff0c;相信大家对数组应该有了一个简单的了解&#xff0c;并对Java中的数据类型有了一个基本的认识&#xff0c;不仅如此我们还明白了怎样定义一个数组类型的变量&#xff0c;在这之后&#xff0c;让我们一起来更加深入的了解一下数组吧。 三、如何创建一个…

Axure软件新功能解析与应用技巧分享

Axure是一种用于创建原型和交互设计的软件工具&#xff0c;广泛应用于操作界面。&#xff08;UI&#xff09;和客户体验&#xff08;UX&#xff09;为了展示和测试应用程序、网站或其他数据产品的性能和操作界面&#xff0c;设计帮助产品经理、设计师和开发者制作具有交互性的原…

Ghost Buster Pro for Mac:系统优化的得力助手

Ghost Buster Pro for Mac是一款功能强大的系统优化工具&#xff0c;专为Mac用户设计&#xff0c;旨在提供全方位的系统清理、优化和维护服务。 这款软件拥有出色的垃圾清理能力&#xff0c;能够深度扫描并清除Mac上的无效目录、文件、系统日志、下载历史记录、缓存和临时文件…

每日任务:TCP/IP模型和OSI模型的区别

介绍一下TCP/IP模型和OSI模型的区别&#xff1f; OSI模型由国标准化组织提出&#xff0c;而TCP/IP模型是由美国国防部开发的&#xff1b; OSI模型由七个层次组成&#xff0c;从下到上依次为物理层、数据链路层、网络层、传输层、会话层、表示层和应用层。而TCP/IP模型只有四层…

Text Control 控件教程:使用 .NET C# 中的二维码和条形码增强文档

QR 码和条形码非常适合为文档和 PDF 文件增加价值&#xff0c;因为它们提供轻松的信息访问、验证信息、跟踪项目和提高交互性。条形码可以弥补纸质或数字人类可读文档与网络门户或网络应用程序中的数字信息之间的差距。大多数用户都熟悉 QR 码和条形码&#xff0c;它们在许多过…

宠物空气净化器是不是智商税?靠谱的浮毛空气净化器推荐

宠物空气净化器是不是智商税&#xff1f;宠物空气净化器是否真有其效&#xff0c;是许多由于要不要买空气净化器养宠人心中的疑惑。作为呼吸科的医生&#xff0c;我深知优质的空气质量对预防呼吸系统疾病的重要性。因此&#xff0c;我建议所有有条件的家庭&#xff0c;尤其是家…

IO多路复用——select

仅一个线程、进程处理并发 IO多路转接&#xff08;复用&#xff09;之select 跨平台适用linux&#xff0c;windows 底层&#xff1a;线性表 IO多路转接&#xff08;复用&#xff09;之poll 适用linux 底层&#xff1a;线性表 IO多路转接&#xff08;复用&#xff09;之epo…

Ecovadis评估方案

在当今全球供应链日益复杂且环保意识日益增强的背景下&#xff0c;EcoVadis评估方案作为一种领先的可持续发展评估工具&#xff0c;正逐步成为企业衡量其社会责任与环境绩效的重要标尺。EcoVadis通过一套全面而细致的评价体系&#xff0c;帮助企业识别其在可持续发展方面的优势…

pdf自动生成书签

PDF 自动生成书签&#xff0c;使用软件【PDF补丁丁】 软件官网&#xff1a; https://www.cnblogs.com/pdfpatcher/Github&#xff1a;https://github.com/wmjordan/PDFPatcher参考视频内容&#xff1a;使用PDFPatcher自动生成PDF书签 直接从软件官网下载压缩包&#xff0c;运…

【日常记录】【JS】JS中查询参数处理工具URLSearchParams

文章目录 1. 引言2. URLSearchParams2.1 URLSearchParams 的构造函数2.2 append() 方法2.3 delete() 方法2.4 entries() 方法2.5 forEach() 方法2.6 get() 方法2.7 getAll() 方法2.8 has() 方法2.9 keys() 方法2.10 set() 方法2.11 toString() 方法2.12 values() 方法 参考链接…

百度搜索X唐朝诡事录跨界联动影视智能体,集追剧探案于一体!

想必这几天大家都已经被 #唐朝诡事录好看#、#唐朝诡事录你真的火了# 刷屏了&#xff0c;时隔两年&#xff0c;霸榜热门大剧《唐朝诡事录之西行》终于火热回归啦&#xff01; 一文一武双男主设定只为专心攻破悬案&#xff0c;正反派全都智商在线&#xff0c;是一部不可多得的良…

PaliGemma:A versatile 3B VLM for transfer

1.model 1.1 Architecture 图像分辨率为固定的正方形,224,448,896,这导致每种模型都有固定数量的图像token,256,1024,4096。图像在最前面,无需特殊的位置标记,BOS标记文本的开始,\n作为SEP token,不出现在前缀中,单独对SEP进行标记,以避免它与前缀的结束或后缀的…

Navicat图形化管理工具安装教程

1、Navicat简介 Navicat 是一套快速、可靠的数据库管理工具&#xff0c;专为简化数据库的管理及降低系统管理成本而开发。它的设计符合数据库管理员、开发人员及中小企业的需要。Navicat使用直觉化的图形用户界面&#xff0c;让用户能够安全简单的方式创建、组织、访问并共用信…

如何检查代理IP地址是否被占用

使用代理IP时&#xff0c;有时候会发现IP仍然不可用&#xff0c;可能是因为已经被其他用户或者网络占用了。为了检测代理IP是否被占用&#xff0c;我们可以采用一些方法进行验证测试&#xff0c;以保证代理IP的有效性和稳定性。 1.ARP缓存方法 ARP缓存法是一种简单有效的检测代…

Tinygrad,llama3,Reward Model

目录 Tinygrad 与其他框架的比较 llama3 Reward Model Tinygrad 是一个轻量级的深度学习框架,由George Hotz(也被称为geohot)开发。以下是对Tinygrad的详细介绍: 与其他框架的比较 与PyTorch、TensorFlow等更全面的深度学习框架相比,Tinygrad在功能上可能有所限制,…

Unity UGUI 之 事件接口

本文仅作学习笔记与交流&#xff0c;不作任何商业用途 本文包括但不限于unity官方手册&#xff0c;唐老狮&#xff0c;麦扣教程知识&#xff0c;引用会标记&#xff0c;如有不足还请斧正 本文在发布时间选用unity 2022.3.8稳定版本&#xff0c;请注意分别 1.什么是事件接口&…

【github】使用KeepassXC 解决github Enable two-factor authentication (2FA) 第二因子认证

下载 https://github.com/keepassxreboot/keepassxc/releases/download/2.7.9/KeePassXC-2.7.9-Win64.msi 代理地址 https://dgithub.xyz/keepassxreboot/keepassxc/releases/download/2.7.9/KeePassXC-2.7.9-Win64.msi 由于该软件不允许截图&#xff0c;以下操作参考官网 …