Vue3利用vue-plugin-hiprint插件實現(xiàn)無預覽打印功能

更新時間：2025年04月11日 10:00:34 作者：VT.饅頭

在MES管理系統(tǒng)中需要實現(xiàn)條碼數(shù)據(jù)從接口返回后,直接調(diào)用打印機進行打印,跳過瀏覽器的預覽確定那一步,在嘗試很多JS的方式和插件后,都無法實現(xiàn)該功能,所以本文介紹了Vue3如何利用vue-plugin-hiprint插件實現(xiàn)無預覽打印功能,需要的朋友可以參考下

前言

在MES管理系統(tǒng)中需要實現(xiàn)條碼數(shù)據(jù)從接口返回后，直接調(diào)用打印機進行打印，跳過瀏覽器的預覽確定那一步。在嘗試很多JS的方式和插件后，都無法實現(xiàn)該功能，因為基本上最后都是使用了Window.pring()方法進行打印，所以需要本地啟動服務調(diào)用打印機，才能實現(xiàn)該功能。

附上該插件的官方文檔 http://hiprint.io/，本文中未提及的功能基本上都能在官網(wǎng)中找到。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 插件。你也可以根據(jù)需要只加載單個插件。 -->
    <!-- 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>
    <!-- 調(diào)用瀏覽器打印窗口helper類，可自行替換-->
    <script src="hiprint/plugins/jquery.hiwprint.js"></script>
  </body>
 </html>

3、項目中使用

在使用無預覽打印時如果我們需要對打印內(nèi)容設(shè)置樣式,那我們需要把樣式寫成行內(nèi)樣式不然不會生效.

// 全局引入
// main.ts
import { hiPrintPlugin } from 'vue-plugin-hiprint'
app.use(hiPrintPlugin, '$pluginName')

// 局部引入
import { hiPrintPlugin } from 'vue-plugin-hiprint'

// 頁面中使用
<template>
  <div ref="printRef" >
    //打印內(nèi)容
  </div>
</template>

const printRef = ref();

// 組件
hiprint.init({
   host: "https://printjs.cn:17521", // 打印客戶端的地址
  token: "vue-plugin-hiprint", // 與打印客戶端相同的 token
}) 
//初始化
const hiprintTemplate = new hiprint.PrintTemplate()

// printByHtml為預覽打印，直接通過打印某個元素區(qū)域最好用(最好上手)所以使用的是打印html的方式
hiprintTemplate.printByHtml(printRef.value,{}); 
//printByHtml2方法為直接打印，需要安裝客戶端 下面會提到客戶端的安裝
hiprintTemplate.printByHtml2(printRef.value,{
 printer: printerName, // 打印機名稱，不填則默認打印機
 title: '任務隊列中名稱'
});