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 分钟前
React自定义Hooks设计指南:从封装到复用
前端·javascript·react.js
wangshuai09275 分钟前
vue中process.env.NODE_ENV设置方法
vue.js
JarvanMo18 分钟前
在 Flutter 中正确处理文本缩放
前端
深蓝电商API20 分钟前
HTML 解析入门:用 BeautifulSoup 轻松提取网页数据
前端·爬虫·python·beautifulsoup
excel39 分钟前
JavaScript 运算符与 Vue 中的 1 << n 应用
前端
上单带刀不带妹1 小时前
Vue3 全局 API 转移详解
前端·javascript·vue.js·vue3·api
史上最菜开发1 小时前
a-input输入框,苹果电脑(MAC)输入法的输入Bug
vue.js·macos·bug
怕冷的火焰(~杰)1 小时前
yarn安装electron和better-sqlite3失败问题(rebuild:better-sqlite3)
前端·javascript·electron
IT_陈寒1 小时前
JavaScript性能优化:7个90%开发者不知道的V8引擎黑科技
前端·人工智能·后端
摸鱼的春哥1 小时前
“全栈模式”必然导致“质量雪崩”!和个人水平关系不大
前端·javascript·后端