快捷導(dǎo)航

Vue3利用vue-plugin-hiprint插件實(shí)現(xiàn)無(wú)預(yù)覽打印功能

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

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

前言

在MES管理系統(tǒng)中需要實(shí)現(xiàn)條碼數(shù)據(jù)從接口返回后，直接調(diào)用打印機(jī)進(jìn)行打印，跳過(guò)瀏覽器的預(yù)覽確定那一步。在嘗試很多JS的方式和插件后，都無(wú)法實(shí)現(xiàn)該功能，因?yàn)榛旧献詈蠖际鞘褂昧薟indow.pring()方法進(jìn)行打印，所以需要本地啟動(dòng)服務(wù)調(diào)用打印機(jī)，才能實(shí)現(xiàn)該功能。

附上該插件的官方文檔 http://hiprint.io/，本文中未提及的功能基本上都能在官網(wǎng)中找到。Gitee鏈接

一、Vue3項(xiàng)目配置

1、安裝vue-plugin-hiprint插件

npm install vue-plugin-hiprint

2、文件引入

//在項(xiàng)目的入口文件中引入所需的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ù)需要只加載單個(gè)插件。 -->
    <!-- polyfill.min.js解決瀏覽器兼容性問(wèn)題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、項(xiàng)目中使用

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

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

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

// 頁(yè)面中使用
<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為預(yù)覽打印，直接通過(guò)打印某個(gè)元素區(qū)域最好用(最好上手)所以使用的是打印html的方式
hiprintTemplate.printByHtml(printRef.value,{}); 
//printByHtml2方法為直接打印，需要安裝客戶端 下面會(huì)提到客戶端的安裝
hiprintTemplate.printByHtml2(printRef.value,{
 printer: printerName, // 打印機(jī)名稱，不填則默認(rèn)打印機(jī)
 title: '任務(wù)隊(duì)列中名稱'
});

二、安裝客戶端

如果要實(shí)現(xiàn)無(wú)預(yù)覽打印(靜默打印)就需要安裝打印客戶端, 無(wú)預(yù)覽打印的原理是使用 hiprint 的打印客戶端，它是一個(gè)基于 electron 的桌面應(yīng)用，可以接收來(lái)自瀏覽器的打印請(qǐng)求，然后直接調(diào)用本地打印機(jī)進(jìn)行打印。

安裝地址

安裝完成后打開(kāi)軟件，如果你的前端運(yùn)行著，就會(huì)顯示有本地連接，不然就是沒(méi)有連上，需要重新啟動(dòng)服務(wù)。界面如下：

以上就是Vue3利用vue-plugin-hiprint插件實(shí)現(xiàn)無(wú)預(yù)覽打印功能的詳細(xì)內(nèi)容，更多關(guān)于Vue3 vue-plugin-hiprint無(wú)預(yù)覽打印的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: