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,一经查实,立即删除!

相关文章

深入解析:如何使用Nmap绕过防火墙和欺骗IDS规则

在现代网络安全领域&#xff0c;防火墙和入侵检测系统&#xff08;IDS&#xff09;是保护网络免受攻击的关键组件。Nmap作为一款强大的网络扫描工具&#xff0c;不仅用于网络探测和安全审计&#xff0c;还能在合法渗透测试中发挥重要作用。本指南将详细介绍如何使用Nmap绕过防火…

观察者模式(C++实现)

观察者模式&#xff08;Observer Pattern&#xff09;是一种行为设计模式&#xff0c;它定义了一种一对多的依赖关系&#xff0c;当一个对象的状态发生变化时&#xff0c;所有依赖于它的对象都会得到通知并自动更新。 观察者模式的核心思想 观察者模式通过分离观察者和被观察…

RxJava 面试题及其答案

以下是一个全面的 RxJava 面试题及其答案&#xff0c;涵盖了 RxJava 的各个方面&#xff0c;包括基本概念、操作符、线程管理、错误处理、背压处理等&#xff1a; 基本概念 1. RxJava 的基本概念和原理是什么&#xff1f; 答案&#xff1a; RxJava 是一个用于响应式编程的库…

随记0000——从0、1 到 C语言

C语言的发展历程是计算机科学史上的一个重要里程碑。 下面是从最早的机器语言到汇编语言&#xff0c;再到高级语言如 C 语言的简化演进过程&#xff1a; 1. 机器语言 定义与特点 机器语言是最底层的编程语言&#xff0c;由一系列二进制代码组成。直接被CPU执行&#xff0c;…

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

创新大赛中财务预测的策略与技巧 前言财务预测的重要性财务预测的步骤财务预测的关键要素注意事项结语 前言 在当今快节奏、竞争激烈的商业环境中&#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模型只有四层…

linux timestamp

驱动或应用中获取时间戳的接口。 #include <stdio.h> #include <stdlib.h> #include <string.h> #include <time.h> #include <sys/time.h> #if 0 #include <linux/ktime.h> /* 内核驱动中获取时间戳 */ static ktime_t get_kernel_time…

JS小应用:复制指定div的内容到剪贴板

要复制指定div的内容到剪贴板&#xff0c;可以使用以下JavaScript代码&#xff1a; function copyDivContentToClipboard(divId) {// 获取div元素var div document.getElementById(divId);if (!div) {return;}// 创建一个新的临时div来持有要复制的内容var tempDiv document…

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

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

C#初级——数组

数组 数组是一个存储相同类型元素的固定大小的顺序集合。数组是用来存储数据的集合&#xff0c;通常认为数组是一个同一类型变量的集合。 数组的定义 数组类型[] 数组名称 value; 初始化数组 数组类型[] 数组名称 new 数组类型[数组大小]; 数组赋值 数组可以通过直接赋值…

Java整理11

1、Web乱码及路径问题 建多级目录Package中&#xff1a;a.b.cDirectory中&#xff1a;a/b/c 当前页面中所有不加任何修饰的相对路径前&#xff0c;会自动加上href中的内容&#xff0c;将绝对路径问题转换成相对路径问题 <head><base href" "> </he…

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

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

数据结构:顺序表的实现

1.SeqList.h 头文件 #pragma once #include <stdio.h> #include <stdlib.h> #include <assert.h> //定义动态顺序表 typedef int SLDatatype;typedef struct SeqLlist {SLDatatype* arr;int capacity;int size; }SL;//typedef struct SeqList Sl;//初始化 …

IO多路复用——select

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

Perl的文本艺术:精通格式化输入输出

Perl的文本艺术&#xff1a;精通格式化输入输出 Perl以其在文本处理方面的卓越能力而闻名&#xff0c;其中格式化输入输出是Perl的强大特性之一。格式化提供了一种灵活的方式来定义输入和输出数据的布局和外观。本文将详细介绍Perl中的格式化输入输出的使用&#xff0c;并提供…