VUE前端HTML静默打印(不弹出打印对话框)PDF简单方案

前言

在做打印功能的时候,以前大部分客户端都是用C#做的,静默打印(也就是不弹出打印对话框)比较简单。

但是使用浏览器作为客户端,静默打印(也就是不弹出打印对话框)做起来就比较困难。困难的原因是浏览器的各种限制,浏览器并不支持这方面的更改

在现有使用vue开发的项目中,有个比较简单的处理方式就是使用 electron-hiprint

参考地址:https://gitee.com/CcSimple/electron-hiprint#%E4%BD%BF%E7%94%A8-pdf-%E6%89%93%E5%8D%B0%E5%8A%9F%E8%83%BD

也就是本来是浏览器去调用打印控件,现在直接在对应电脑上安装一个程序,然后浏览器去调用该程序。

从
浏览器 -> 打印
改为
浏览器 -> electron-hiprint -> 打印

开始验证

打印有很多种方法,比如vue的html表格等,但是为了验证方便,我直接从后端接口返回一个pdf,改pdf直接打印出来

例如

http://localhost:7000/print/download/TESTPDF.PDF

在这里插入图片描述

  • 测试:使用前端把该地址直接打印出来

安装electron-hiprint 程序

下载地址:
https://gitee.com/CcSimple/electron-hiprint/releases

我使用的是window64位系统,所以安装

在这里插入图片描述

安装后打开,进行配置

只需要简单配置一个参数:

在这里插入图片描述
在这里插入图片描述

TOKEN设备修改为:TEST_PRINT

同时打开电脑获取打印机名称、打印机名称,不填则默认打印机

在这里插入图片描述

KONICA MINOLTA 205i

在VUE 项目中使用 electron-hiprint

使用npm

npm install vue-plugin-hiprint

或使用yarn

yarn add vue-plugin-hiprint

在项目进行使用
注意:具体参数可参考官方文档

在这里插入图片描述

引入依赖

// 全局引入
// main.js
import { hiPrintPlugin } from 'vue-plugin-hiprint'
Vue.use(hiPrintPlugin, '$pluginName')// 局部引入
import { hiPrintPlugin } from 'vue-plugin-hiprint'

使用依赖


<template><el-button type="primary"  @click="PrintBtnClick">静默打印测试</el-button>
</template>
<script>// 局部引入import { hiprint } from 'vue-plugin-hiprint'export default {methods: {//指定打印机hiprint.hiwebSocket.send({ client:'TEST_PRINT', printer:'KONICA MINOLTA 205i', type: 'url_pdf', pdf_path: 'http://localhost:7000/print/download/TESTPDF.PDF' })//使用默认打印机hiprint.hiwebSocket.send({ client:'TEST_PRINT', type: 'url_pdf', pdf_path: 'http://localhost:7000/print/download/TESTPDF.PDF' })}}
</script>

测试,点击页面按钮,则可直接打印

出现的问题

有时候,打印机会报错,说没有指定纸张,这个报错可见 issue
https://mp.weixin.qq.com/s/E-ZfuKLH3-GvKn4AosRvaw

在这里插入图片描述

解决方案,设置打印机首选项

在这里插入图片描述

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

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

相关文章

Ubuntu 磁盘扩容

1.下载工具 sudo apt-get install gparted 2.调整大小

Stable Diffusion 使用

目录 背景 最简单用法 进阶用法 高手用法 safetensor 一、概述 二、主要特点 背景 Stable Diffusion 开源后&#xff0c;确实比较火&#xff0c;上次介绍了下 Stable Diffusion 最简单的concept。今天继续介绍下&#xff0c;以Liblib 为例&#xff0c;介绍下如何使用参…

Ubuntu22.4 Qt6.6 ros_qtc_plugin插件安装

1.下载官方插件 https://github.com/ros-industrial/ros_qtc_plugin/releases 2. Qt Creator中&#xff0c;“Help - 关于插件”–>“install Plugin…”–>“浏览…”&#xff0c;找到下载的插件&#xff0c;按照提示安装&#xff0c;最后重启Qt。 3.重启Qt后&#xff0…

Spark SQL 概述

Spark SQL 概述 Spark SQL 是 Apache Spark 的一个模块&#xff0c;专门用于处理结构化数据。它集成了 SQL 查询和 Spark 编程的强大功能&#xff0c;使得处理大数据变得更加高效和简便。通过 Spark SQL&#xff0c;用户可以直接在 Spark 中使用 SQL 查询&#xff0c;或者使用 …

JMeter进行HTTP接口测试的技术要点

参数化 用户定义的变量 用的时候 ${名字} 用户参数 在参数列表中传递 并且也是${} csv数据文件设置 false 不忽略首行 要首行 从第一行读取 true 忽略首行 从第二行开始 请求时的参数设置&#xff1a; 这里的名称是看其接口需要的请求参数的名称 这里的变量名称就是为csv里面…

itextpdf字体选择

itextpdf 版本7.2.5 itextpdf-html2pdf 版本4.0.5 这里讲的是通过html转pdf&#xff0c;在html2pdf中是通过html中font-family样式来确定字体的&#xff0c;那已知font-family的情况&#xff0c;怎么确定pdf中实际用的字体&#xff0c;大致分为两步&#xff1a; 1、通过font…

网页数据抓取:融合BeautifulSoup和Scrapy的高级爬虫技术

网页数据抓取&#xff1a;融合BeautifulSoup和Scrapy的高级爬虫技术 在当今的大数据时代&#xff0c;网络爬虫技术已经成为获取信息的重要手段之一。Python凭借其强大的库支持&#xff0c;成为了进行网页数据抓取的首选语言。在众多的爬虫库中&#xff0c;BeautifulSoup和Scrap…

图像识别和目标检测在超市电子秤上的应用

目录 前言深度学习的目标检测图像识别技术视觉秤的优势其他应用场景中的技术应用未来展望 前言 随着科技的不断发展&#xff0c;电子秤在生鲜超市中的应用也在不断升级。传统的电子秤需要打秤人员手动输入秤码&#xff0c;这不仅耗时费力&#xff0c;还需要大量的培训以记住各…

在Mac上一键安装Mysql(解决所有安装问题)

重点强调安装mysql成功的关键在于安装的版本不能是最新&#xff01;&#xff01; 目录 一&#xff1a;下载mysql数据库安装部分到此结束 二&#xff1a;配置mysql数据库三&#xff1a;启动mysql数据库四&#xff1a;各类奇葩问题总结 一&#xff1a;下载mysql数据库 1.进入MyS…

替换:show-overflow-tooltip=“true“ ,使用插槽tooltip,达到内容可复制

原生的show-overflow-tooltip“true” 不能满足条件&#xff0c;使用插槽自定义编辑&#xff1b; 旧code <el-table-column prop"reason" label"原因" align"center" :show-overflow-tooltip"true" /> <el-table-column pro…

SpringBoot系列:通过AOP+注解优雅实现操作日志记录

文章目录 前言一、简介1.1 操作日志在企业应用中的重要性1.2 使用AOP和注解实现操作日志记录的好处 二、开发环境三、准备工作3.1 创建操作日志记录表3.2 创建系统日志实体类 四、代码实现4.1 创建业务枚举类4.2 创建日志注解4.3 创建操作状态枚举类4.4 创建IP工具类4.5 创建切…

[A-04] ARMv8/ARMv9-Cache的相关策略

ver0.3 前言 前面我们已经通过三篇文章反反复复的讲Cache的概念、结构、架构&#xff0c;相信大家对Cache已经大概有了初步的了解。这里简单归纳一下: (1) Cache从硬件视角看&#xff0c;是连接PE-Core和主存的一种存储介质&#xff0c;存储的数据是主存中数据的副本&#xf…

【算法消费者行为】算法性能预期如何增强冲动性购买?—推文分享—2024-07-16

今天的推文主题是&#xff1a;【算法&消费者行为】 第一篇&#xff1a;如何通过管理多种刺激来优化客户体验&#xff1f;购买行为的驱动因素是隐性还是显性的消费者态度&#xff1f;第二篇&#xff1a;算法性能期望如何增强在线零售中的即兴购买行为。第三篇&#xff1a;社…

【Linux】Ubuntu 漏洞扫描与修复的吃瘪经历

自从上次“劫持”事情后&#xff0c;项目经理将所有跟安全相关的都推给我了&#xff08;不算 KPI 又要被白嫖&#xff0c;烦死了&#xff09;。这次客户又提了一个服务器安全扫描和漏洞修复的“活”&#xff0c;我这边顺手将过程记录一下&#xff0c;就当经验总结跟各位分享一下…

Parallels Desktop 19 for Mac(PD19虚拟机)详细图文安装教程分享

Parallels Desktop 19是一款功能丰富、性能强大且易于使用的虚拟机软件&#xff0c;它可以让您在Mac上同时运行多个操作系统&#xff0c;为您提供更大的灵活性和兼容性。 Parallels Desktop 19 for Mac(PD19虚拟机)下载安装包 Parallels Desktop 19 for Mac(PD19虚拟机)详细图…

【Visual Studio】Visual Studio使用技巧及报错解决合集

目录 目录 一.概述 二.Visual Studio报错问题及解决方法 三.Visual Studio操作过程中遇到的问题及解决方法 四.Visual Studio编译优化选项 五.Visual Studio快捷键 一.概述 持续更新Visual Studio报错及解决方法&#xff0c;包括Visual Studio报错问题及解决方法、Visua…

phenocycler(原CODEX)鉴定三阴乳腺癌不同的治疗反应轨迹

目前临床上需要制定策略来更好地识别哪些患者可以从单独的免疫疗法中受益&#xff0c;或者哪些患者可能需要化疗或放疗等额外疗法来克服耐药性。尽管一些联合放射治疗&#xff08;RT&#xff09;和免疫检查点抑制&#xff08;ICI&#xff09;的临床研究取得了成功&#xff0c;但…

【Linux】常见指令(下)

【Linux】常见指令&#xff08;下&#xff09; 通配符 *man指令cp指令echo指令cat指令&#xff08;简单介绍&#xff09;cp指令 mv指令alias指令which ctrl ccat指令linux下一切皆文件 more指令less指令head指令tail指令管道 通配符 ‘*’ 通配符’ *‘&#xff0c;是可以匹配…

怎样去除视频上的水印和文字,视频水印文本移除教程

在观看和分享视频时&#xff0c;我们经常会遇到带有水印或额外文字的情况。这些标记有时是为了版权保护&#xff0c;有时则是平台的标识&#xff0c;但在某些情况下&#xff0c;它们可能会干扰视频的观赏体验。本文将向你介绍常见的视频水印类型以及如何使用简鹿水印助手去除这…

ARM功耗管理之功耗数据与功耗收益评估

安全之安全(security)博客目录导读 思考&#xff1a;功耗数据如何测试&#xff1f;功耗曲线&#xff1f;功耗收益评估&#xff1f; UPF的全称是Unified Power Format&#xff0c;其作用是把功耗设计意图&#xff08;power intent&#xff09;传递给EDA工具&#xff0c; 从而帮…