您的位置:首页 > 财经 > 金融 > VUE前端HTML静默打印(不弹出打印对话框)PDF简单方案

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

2024/11/16 12:28:39 来源:https://blog.csdn.net/qq_34168515/article/details/140437534  浏览:    关键词: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

在这里插入图片描述

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

在这里插入图片描述

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com