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的话在此处,应用即可。

有打印成功的状态返回

相关推荐
一只一只妖1 小时前
突发奇想,还未实践,在Vben5的Antd模式下,将表单从「JS 配置化」改写成「模板可视化」形式(豆包版)
前端·javascript·vue.js
悟能不能悟4 小时前
js闭包问题
开发语言·前端·javascript
秋秋_瑶瑶4 小时前
vue-amap组件呈现的效果图如何截图
前端·javascript·vue-amap
gnip5 小时前
js上下文
前端·javascript
中草药z5 小时前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
不知名raver(学python版)5 小时前
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
前端·npm·node.js
醉方休6 小时前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架
excel6 小时前
📖 小说网站的预导航实战:link 预加载 + fetch + 前进后退全支持
前端
学习3人组6 小时前
React 样式隔离核心方法和最佳实践
前端·react.js·前端框架