vue实现静默打印pdf

浏览器中想要打印文件,不依靠浏览器自带的打印窗口,想要实现静默打印(也就是不弹出打印对话框),同时控制打印份数的功能,一种方式是使用vue-plugin-hiprint和本地安装客户端electron-hiprint

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

js 复制代码
浏览器 -> electron-hiprint -> 打印

实现步骤

安装 electron-hiprint

上面有安装地址,比如windows 64位的选择这个安装包下载,并使用管理员身份安装

安装完成并启动后

在vue项目中使用vue-plugin-hiprint

安装包

sh 复制代码
npm install vue-plugin-hiprint
# 或者
yarn add vue-plugin-hiprint

项目中引入包

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

// 局部引入(推荐)
import { hiPrintPlugin } from 'vue-plugin-hiprint'

页面中使用

js 复制代码
<button @click="print">打印</YsButton>

import { hiPrintPlugin } from 'vue-plugin-hiprint'

async print() {
      const printer = hiprint.hiwebSocket.getPrinterList().find(i => i.isDefault); // 获取当前默认的打印机
      console.log(printer)
      // hiprint.hiwebSocket.send({ client: 'TEST_PRINT', printer: printer?.name, type: 'url_pdf', pdf_path: 'http://xx.xxx.xx.xx:1123/preview/xxx.pdf' }) // 指定打印机,同时配置客户端的token
      hiprint.hiwebSocket.send({ client: '', type: 'url_pdf', pdf_path: 'http://xx.xxx.xx.xx:1123/preview/xxx.pdf', pages: 1, copies: 2 }) // 设置打印的页数和打印的份数
    },

如果需要设置客户端的token的话在此处,应用即可。

有打印成功的状态返回

相关推荐
im_AMBER12 小时前
React 01
前端·javascript·笔记·react.js·前端框架·web
@大迁世界12 小时前
React 19.2.0 有哪些新变化
前端·javascript·react.js·前端框架·ecmascript
weixin_4024863412 小时前
直接将ppt导出成pdf 图片失真严重,选中整个图片和需要的对象后保存成图片,格式选择为.svg
pdf
TextIn智能文档云平台12 小时前
LLM 文档处理:如何让 AI 更好地理解中文 PDF 中的复杂格式?
人工智能·pdf
liliangcsdn12 小时前
使用Deepseek解析PDF文件
pdf
Red Car12 小时前
如何向文件夹内所有PDF增加水印
python·pdf
华仔啊12 小时前
用 Vue3 + Canvas 做了个超实用的水印工具,同事都在抢着用
前端·vue.js·canvas
炒毛豆13 小时前
uniapp微信小程序+vue3基础内容介绍~(含标签、组件生命周期、页面生命周期、条件编译(一码多用)、分包))
vue.js·微信小程序·uni-app
Bacon13 小时前
前端:从0-1实现一个脚手架
前端
Bacon13 小时前
前端项目部署实战 nginx+docker持续集成
前端