Vue3利用vue-plugin-hiprint插件实现无预览打印功能
更新时间：2025年04月11日 10:00:34 作者：VT.馒头
在MES管理系统中需要实现条码数据从接口返回后,直接调用打印机进行打印,跳过浏览器的预览确定那一步,在尝试很多JS的方式和插件后,都无法实现该功能,所以本文介绍了Vue3如何利用vue-plugin-hiprint插件实现无预览打印功能,需要的朋友可以参考下
前言
在MES管理系统中需要实现条码数据从接口返回后，直接调用打印机进行打印，跳过浏览器的预览确定那一步。在尝试很多JS的方式和插件后，都无法实现该功能，因为基本上最后都是使用了Window.pring()方法进行打印，所以需要本地启动服务调用打印机，才能实现该功能。
附上该插件的官方文档 http://hiprint.io/，本文中未提及的功能基本上都能在官网中找到。Gitee链接
一、Vue3项目配置
1、安装vue-plugin-hiprint插件
npm install vue-plugin-hiprint
2、文件引入
//在项目的入口文件中引入所需的CDN
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>hinnn-hiprint</title>
<!-- hiprint -->
<link href="hiprint/css/hiprint.css" rel="external nofollow" rel="stylesheet">
<link href="hiprint/css/print-lock.css" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<link href="hiprint/css/print-lock.css" rel="external nofollow" rel="external nofollow" media="print" rel="stylesheet">
</head>
<body>
<h1>hiprint 是一款用于web打印的js组件</h1>
<!-- 加载 hiprint 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<!-- polyfill.min.js解决浏览器兼容性问题v6.26.0-->
<script src="hiprint/polyfill.min.js"></script>
<!-- hiprint 核心js-->
<script src="hiprint/hiprint.bundle.js"></script>
<!-- 条形码生成组件-->
<script src="hiprint/plugins/JsBarcode.all.min.js"></script>
<!-- 二维码生成组件-->
<script src="hiprint/plugins/qrcode.js"></script>
<!-- 调用浏览器打印窗口helper类，可自行替换-->
<script src="hiprint/plugins/jquery.hiwprint.js"></script>
</body>
</html>
3、项目中使用
在使用无预览打印时如果我们需要对打印内容设置样式,那我们需要把样式写成行内样式不然不会生效.
// 全局引入
// main.ts
import { hiPrintPlugin } from 'vue-plugin-hiprint'
app.use(hiPrintPlugin, '$pluginName')
// 局部引入
import { hiPrintPlugin } from 'vue-plugin-hiprint'
// 页面中使用
<template>
<div ref="printRef" >
//打印内容
</div>
</template>
const printRef = ref();
// 组件
hiprint.init({
host: "https://printjs.cn:17521", // 打印客户端的地址
token: "vue-plugin-hiprint", // 与打印客户端相同的 token
})
//初始化
const hiprintTemplate = new hiprint.PrintTemplate()
// printByHtml为预览打印，直接通过打印某个元素区域最好用(最好上手)所以使用的是打印html的方式
hiprintTemplate.printByHtml(printRef.value,{});
//printByHtml2方法为直接打印，需要安装客户端 下面会提到客户端的安装
hiprintTemplate.printByHtml2(printRef.value,{
printer: printerName, // 打印机名称，不填则默认打印机
title: '任务队列中名称'
});
二、安装客户端
如果要实现无预览打印(静默打印)就需要安装打印客户端, 无预览打印的原理是使用 hiprint 的打印客户端，它是一个基于 electron 的桌面应用，可以接收来自浏览器的打印请求，然后直接调用本地打印机进行打印。
安装完成后打开软件，如果你的前端运行着，就会显示有本地连接，不然就是没有连上，需要重新启动服务。界面如下：
以上就是Vue3利用vue-plugin-hiprint插件实现无预览打印功能的详细内容，更多关于Vue3 vue-plugin-hiprint无预览打印的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了vue超时计算的组件实例代码,需要的朋友可以参考下2018-07-07
在许多应用程序中，我们经常需要执行定期的异步任务轮询，本文就介绍了Vue3如何处理异步任务轮询，感兴趣的可以了解一下2023-05-05
Electron是一个开源的框架,用于构建跨平台的桌面应用程序,这篇文章主要介绍了前端vue项目打包成桌面端exe应用的简单步骤,文中给出详细的代码示例,需要的朋友可以参考下2025-06-06
动态权限控制通过后端获取用户权限数据,前端动态生成路由菜单及按钮权限,结合路由守卫与自定义指令实现访问控制,具有一定的参考价值,感兴趣的可以了解一下2025-08-08
这篇文章主要给大家介绍了关于vue项目接入高德地图点击地图获取经纬度以及省市区功能的相关资料,开发中我们需要地图定位,就是用户输入位置,自动定位获取经纬度,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了vue接入高德地图绘制扇形，需求是有一个列表，列表的数据就是一个基站信息，包含基站的经纬度信息和名字，基站下面又分扇区，本文通过示例代码给大家介绍的非常详细，需要的朋友可以参考下2022-04-04
这篇文章主要给大家介绍了关于VUE子组件向父组件传值（含传多值及添加额外参数场景）的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
前端使用uniapp开发项目完成后，需要将页面打包，生成H5的静态文件，部署在服务器上这样通过服务器链接地址，直接可以在手机上点开来访问，下面小编给大家讲解uniapp开发打包成H5部署到服务器的步骤，感兴趣的朋友一起看看吧2022-11-11
这篇文章主要为大家介绍了vue日常开发基础Axios网络库封装示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要给大家介绍了关于Vue实现关联页面多级跳转（页面下钻）功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
最新评论