网站建设产品分类,网页游戏排行榜2013前十名,wordpress页面文章区别,洛阳霞光网络建站前言
在做打印功能的时候#xff0c;以前大部分客户端都是用C#做的#xff0c;静默打印#xff08;也就是不弹出打印对话框#xff09;比较简单。
但是使用浏览器作为客户端#xff0c;静默打印#xff08;也就是不弹出打印对话框#xff09;做起来就比较困难。困难的…前言
在做打印功能的时候以前大部分客户端都是用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使用依赖 templateel-button typeprimary clickPrintBtnClick静默打印测试/el-button
/template
script// 局部引入import { hiprint } from vue-plugin-hiprintexport 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 解决方案设置打印机首选项
