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://xiahunao.cn/news/3267801.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

新手做短视频素材在哪里找?做短视频素材工具教程网站有哪些?

新手短视频制作指南&#xff1a;从零开始&#xff0c;快速成为短视频达人 蛙学网&#xff1a;新手短视频制作的首选平台 作为短视频制作新手&#xff0c;你是否在寻找合适的素材和工具来打造令人眼前一亮的作品&#xff1f;不用担心&#xff0c;蛙学网作为国内领先的素材平台&…

远程割草机行业全景剖析与投资前瞻预测:未来六年年复合增长率CAGR为7.8%

一、市场趋势分析 随着科技的进步和生活节奏的加快&#xff0c;远程割草机行业迎来了快速发展期。消费者对于省时省力的自动化园艺工具的需求推动了这一行业的增长。数据显示&#xff0c;远程割草机提供了更为安全、高效和环保的草坪维护解决方案。预计未来几年&#xff0c;随…

react小程序分包(遇见的坑)

使用的是taro组件 pages是原文件&#xff0c;分包文件夹是package 为了减少修改路径直接复制的pages的文件夹 第一个坑&#xff1a; 我做了分包&#xff0c;没有build打包导致没有生效&#xff08;所以需要build一下再dist里面生成分包的文件&#xff09; 第二个坑——路由…

C++笔记---缺省参数和函数重载

1. 缺省参数 1.1 定义 缺省参数是声明或定义函数时为函数的参数指定一个缺省值&#xff08;默认值&#xff09;。在调用该函数时&#xff0c;如果没有指定实参 则采用该形参的缺省值&#xff0c;否则使用指定的实参&#xff0c;缺省参数分为全缺省和半缺省参数。 void Func(…

LwIP入门实战 — 1 计算机网络简述

目录 1 计算机网络类别 2 常用网络协议与协议栈 2.1 常用网络协议 2.2 常用TCP/IP协议栈 3 网络协议的分层模型 4 协议层报文间的封装与拆封 5 WAN接口和LAN接口 1 计算机网络类别 广域网WAN(Wide Area Network)&#xff1a;广域网的作用范围通常为几十到几千公里&…

【用最少数量的箭引爆气球】python刷题记录

R2-贪心篇. 求最小&#xff0c;那就尽可能地假设更多的气球y值不相同咯。 不对&#xff0c;气球除了y值我们随便摆&#xff0c;所以找尽可能多重叠的&#xff0c;就作为同一只箭。 class Solution:def findMinArrowShots(self, points: List[List[int]]) -> int:#贪心策略…

高性能 Java 本地缓存 Caffeine 框架介绍及在 SpringBoot 中的使用

在现代应用程序中&#xff0c;缓存是一种重要的性能优化技术&#xff0c;它可以显著减少数据访问延迟&#xff0c;降低服务器负载&#xff0c;提高系统的响应速度。特别是在高并发的场景下&#xff0c;合理地使用缓存能够有效提升系统的稳定性和效率。 Caffeine 是一个高性能的…

宝塔单ip,新建多站点

报错如上&#xff1a; 那么如何新建多站点呢 先随便写个名字上去&#xff0c;然后再重新绑定别的端口… 这个时候访问99端口即可 。 如果是有域名&#xff0c;则不需要这样做 、直接80端口也可以多站点

OSPF配置与分析

前言&#xff1a;本博客仅作记录学习使用&#xff0c;部分图片出自网络&#xff0c;如有侵犯您的权益&#xff0c;请联系删除 一、相关知识 开放最短路径优先&#xff08;Open Shortest Path First&#xff0c;OSPF&#xff09;基于链路状态算法&#xff0c;是一个内部网关协议…

gitee设置ssh公钥密码避免频繁密码验证

gitee中可以创建私有项目&#xff0c;但是在clone或者push都需要输入密码&#xff0c; 比较繁琐。 公钥则可以解决该问题&#xff0c;将私钥放在本地&#xff0c;公钥放在gitee上&#xff0c;当对项目进行操作时带有的私钥会在gitee和公钥进行验证&#xff0c;避免了手动输入密…

三目操作符

双目操作符有、-、*、/、% 单目操作符有--、、、- 三目操作符有表达式1&#xff1f;表达式2&#xff1a;表达式3 如果表达式1为真则表达式2计算否则表达式3计算&#xff0c;计算结果为整个表达式的结果 #include<stdio.h> int main() {int a 0;int b 0;scanf(&quo…

Web开发:使用数据库工具Navicat技巧合集

1.EXCEL批量导入数据 打开Navicat准备导入数据&#xff0c;点击导入 选择excel 字段名行应该写0&#xff08;下图错误&#xff09; 下一步&#xff0c;表已经用语法建好了&#xff0c;因此不用打勾 配置好字段&#xff0c;下一步&#xff0c;点击开始即可。 2.数据表从一个服…

R包:plot1cell单细胞可视化包

介绍 plot1cell是用于单细胞数据seurat数据对象的可视化包。 安装 ## You might need to install the dependencies below if they are not available in your R library. bioc.packages <- c("biomaRt","GenomeInfoDb","EnsDb.Hsapiens.v86&qu…

【React 】开发环境搭建详细指南

文章目录 一、准备工作1. 安装 Node.js 和 npm2. 选择代码编辑器 二、创建 React 项目1. 使用 Create React App2. 手动配置 React 项目 三、集成开发工具1. ESLint 和 Prettier2. 使用 Git 进行版本控制 在现代前端开发中&#xff0c;React 是一个非常流行的框架&#xff0c;用…

与众不同的社交体验:Facebook的新功能与新变化

在快速变化的社交媒体领域&#xff0c;Facebook不断引入创新功能和变化&#xff0c;以满足用户日益增长的需求&#xff0c;并提供与众不同的社交体验。从增强现实到数据隐私&#xff0c;Facebook的新功能和更新正在塑造一个全新的社交平台。本文将深入探讨这些新功能和变化&…

昇思25天学习打卡营第33天|共赴算力时代

文章目录 一、平台简介二、深度学习模型2.1 处理数据集2.2 模型训练2.3 加载模型 三、共赴算力时代 一、平台简介 昇思大模型平台&#xff0c;就像是AI学习者和开发者的超级基地&#xff0c;这里不仅提供丰富的项目、模型和大模型体验&#xff0c;还有一大堆经典数据集任你挑。…

字节跳动推出端到端同声传译智能体;OpenAI 搜索引擎 SearchGPT 登场丨 RTE 开发者日报

开发者朋友们大家好&#xff1a; 这里是 「RTE 开发者日报」 &#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE&#xff08;Real-Time Engagement&#xff09; 领域内「有话题的 新闻 」、「有态度的 观点 」、「有意思的 数据 」、「有思考的 文…

2024算法、高性能计算与人工智能国际学术会议(AHPCAI 2024)

2024算法、高性能计算与人工智能国际学术会议&#xff08;AHPCAI 2024&#xff09; 2024 International Conference on Algorithms, High Performance Computing and Artificial Intelligence 2024年8月14-16日 | 中国-郑州 2024中国算力大会正在发起“算力中国最佳学术论文…

企业组织机构代码查询入口直达词令是什么?

企业组织机构代码查询入口直达词令是什么&#xff1f; 1、手机安装&#xff0c;打开词令关键词口令直达工具&#xff1b; 2、输入词令「组织机构代码查询」关键词直达口令&#xff1b; 3、搜索直达词令关联的目标企业组织机构代码查询入口&#xff1b; 4、输入营业执照上的18位…