hiprint結合vue2項目實現靜默打印詳細使用步驟

代碼地址是:vue-plugin-hiprint: hiprint for Vue2/Vue3 ?打印、打印設計、可視化設計器、報表設計、元素編輯、可視化打印編輯

本地安裝包地址:electron-hiprint 發行版 - Gitee.com

1、先安裝hipint安裝包在本地

2、項目運行npm(socket.io是為了實現自動打印下載的)

npm install vue-plugin-hiprint
npm i jquery --save-d
npm install socket.io

3、在main.js文件中

import {hiPrintPlugin} from 'vue-plugin-hiprint'
Vue.use(hiPrintPlugin, '$pluginName')import $ from "jquery";
window.jquery = window.$ = $;
Vue.prototype.$ = jquery

4、在node_modules包中找到print-lock.css樣式文件復制到項目中

找到后復制到public文件夾

在public文件夾的index.html文件引入這個css文件(說是防止樣式重疊使用的)

<!-- 引入vue-plugin-hiprint的樣式 -->
<link rel="stylesheet" type="text/css" media="print" href="<%= BASE_URL %>print-lock.css"></link>
<link rel="stylesheet" type="text/css" media="print" href="https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@latest/dist/print-lock.css">

5、在頁面的具體使用

print(){const styleStr = `<style>樣式代碼 </style>`;let hiprintTemplate = new this.$pluginName.PrintTemplate()Array.from(this.$refs.print).forEach(v=>{let panel = hiprintTemplate.addPrintPanel({ paperType:'A4',paperNumberDisabled:true})panel.addPrintHtml({options: {"left":15,"top":5, "content":`<html><head>${styleStr}</head><body>${v.innerHTML}</body> </html>` } })}) this.$message({message: '正在執行打印操作,請稍等……',type: 'success',offset:350});hiprintTemplate.print2()//直接靜默打印//hiprintTemplate.print()  預覽打印
}

6、在App.vue加上隱藏的樣式,這樣不影響頁面樣式

#hiwprint_iframe{display: none !important;
}

最后:一定要在啟動了客戶端的軟件情況下點擊打印按鈕,不然會報錯未連接客戶端!

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/64139.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/64139.shtml
英文地址,請注明出處:http://en.pswp.cn/web/64139.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

CUDA各種內存和使用方法

文章目錄 1、全局內存2、局部內存3、共享內存3.1 靜態共享內存3.2 動態共享內存 4、紋理內存5、常量內存6、寄存器內存7、用CUDA運行時API函數查詢設備CUDA 錯誤檢測 1、全局內存 特點&#xff1a;容量最大&#xff0c;訪問延時最大&#xff0c;所有線程都可以訪問。 線性內存…

Chapter 03 復合數據類型-1

1.列表 Python內置的一種有序、可變的序列數據類型&#xff1b; 列表的定義&#xff1a; [ ]括起來的逗號分隔的多個元素組成的序列 列表對象的創建&#xff1a; &#xff08;1&#xff09;直接賦值 >>> list1 []#創建一個空列表賦值給list1 >>> list…

【后端】LNMP環境搭建

長期更新各種好文&#xff0c;建議關注收藏&#xff01; 本文近期更新完畢。 LNMPlinuxnginxmysqlphp 需要的資源 linux服務器 web服務軟件nginx 對應的語言編譯器代碼文件 數據庫mysql安裝 tar.gz包或者命令行安裝 進入root&#xff1a; sodu 或su mkdir path/{server,soft}…

基于PyQt5的UI界面開發——多界面切換

介紹 最初&#xff0c;因為課設的緣故&#xff0c;我只是想做一個通過按鍵進行切面切換而已&#xff0c;但是我看網上資料里面僅是語焉不詳&#xff0c;讓我困惑的很&#xff0c;但后面我通過摸索才發現這件事實在是太簡單了&#xff0c;因此我想要記錄下來。 本博客將介紹如…

操作002:HelloWorld

文章目錄 操作002&#xff1a;HelloWorld一、目標二、具體操作1、創建Java工程①消息發送端&#xff08;生產者&#xff09;②消息接收端&#xff08;消費者&#xff09;③添加依賴 2、發送消息①Java代碼②查看效果 3、接收消息①Java代碼②控制臺打印③查看后臺管理界面 操作…

機器視覺檢測相機基礎知識 | 顏色 | 光源 | 鏡頭 | 分辨率 / 精度 / 公差

注&#xff1a;本文為 “keyence 視覺沙龍中機器視覺檢測基礎知識” 文章合輯。 機器視覺檢測基礎知識&#xff08;一&#xff09;顏色篇 視覺檢測硬件構成的基本部分包括&#xff1a;處理器、相機、鏡頭、光源。 其中&#xff0c;和光源相關的最重要的兩個參數就是光源顏色和…

【每日學點鴻蒙知識】壓力測試、Web組件攔截器、nfc開關狀態、定位能力、rn支持的三方庫

1、HarmonyOS的wukong 支持運行python腳本進行壓力或者常規測試嗎&#xff1f; Python腳本調用hdc命令&#xff0c;執行hdc shell wukong XXXwukong只支持穩定性壓測&#xff0c;普通測試建議使用arkxtest測試框架 2、Web組件頁面內跳轉時自定義WebHeader問題&#xff1f; 如…

GDPU Vue前端框架開發 期末賽道出勇士篇(更新ing)

記住&#xff0c;年底陪你跨年的不會僅是方便面跟你的閨蜜&#xff0c;還有孑的筆記。 選擇題 1.下列選項用于設置Vue.js頁面視圖的元素是&#xff08;&#xff09;。 A. Template B. script C. style D. title 2.下列選項中能夠定義Vuejs根實例對象的元素是&#xff08;&…

Flutter開發HarmonyOS 鴻蒙App的好處、能力以及把Flutter項目打包成鴻蒙應用

Flutter開發HarmonyOS的好處&#xff1a; Flutter是谷歌公司開發的一款開源、免費的UI框架&#xff0c;可以讓我們快速的在Android和iOS上構建高質量App。它最大的特點就是跨平臺、以及高性能。 目前 Flutter 已經支持 iOS、Android、Web、Windows、macOS、Linux 的跨平臺開發…

Effective C++ 條款 17:以獨立語句將 `newed` 對象置入智能指針

文章目錄 條款 17&#xff1a;以獨立語句將 newed 對象置入智能指針核心思想示例代碼錯誤用法分析推薦設計總結 條款 17&#xff1a;以獨立語句將 newed 對象置入智能指針 核心思想 問題背景 如果在將 newed 對象傳遞給智能指針時&#xff0c;包含了復雜的表達式&#xff0c;一…

【體驗官招募】SoFlu - JavaAI 開發助手:開啟智能開發新時代

你是否有過這樣的經歷&#xff1f;在深夜的辦公室里&#xff0c;面對緊急的 Java 項目&#xff0c;看著厚厚的需求文檔&#xff0c;你是否感到無從下手&#xff1f; 當你嘗試理解客戶那些復雜又模糊的需求時&#xff0c;是否會因為要和產品經理反復溝通確認每一個細節而感到厭…

【Compose multiplatform教程07】多平臺常用組件和重要組件目錄

一、基礎交互與顯示組件 Text 查看示例 功能說明&#xff1a;用于在界面上顯示文本內容&#xff0c;支持設置字體、大小、顏色、樣式&#xff08;如加粗、斜體、下劃線&#xff09;等屬性&#xff0c;滿足不同的文本展示需求&#xff0c;可傳達各種信息給用戶。示例場景&#…

自學記錄HarmonyOS Next DRM API 13:構建安全的數字內容保護系統

在完成了HarmonyOS Camera API的開發之后&#xff0c;我開始關注更復雜的系統級功能。在瀏覽HarmonyOS Next文檔時&#xff0c;我發現了一個非常有趣的領域&#xff1a;數字版權管理&#xff08;DRM&#xff09;。最新的DRM API 13提供了強大的工具&#xff0c;用于保護數字內容…

【HENU】河南大學計院2024 操作系統 簡答題復習

和光同塵_我的個人主頁 一直游到海水變藍。 單項選擇 15x2 30 判斷 10x1 10 簡答 3x10 30 綜合 3x10 30 簡答題 簡述操作系統的四個基本特征。 并發性 共享性 虛擬性 異步性 并發性是最重要特性&#xff0c;其它三種特性以此為前提。 并發 并發(Concurrence)&#…

基于Android的校園導航系統

基于Android的校園導航系統是一種專為校園環境設計的移動應用程序&#xff0c;旨在幫助學生、教職工及訪客快速、準確地找到校園內的目的地。以下是對基于Android的校園導航系統的詳細介紹&#xff1a; 一、系統概述 基于Android的校園導航系統通常包括客戶端&#xff08;移動…

GEE錯誤——PCA系數變換的時候出現的錯誤

目錄 錯誤提示1 錯誤提示2 原始的教程鏈接&#xff1a; 錯誤代碼 修正后的代碼 結果 錯誤提示1 這個是因為原始GEE教程中給的讓我們填入需要進行計算的波段名稱&#xff0c;而且是以list的形式傳入。 錯誤提示2 這里我們雖然傳入了正確的波段名稱&#xff0c;但是發現要…

C#代碼實現把中文錄音文件(.mp3 .wav)轉為文本文字內容

我們有一個中文錄音文件.mp3格式或者是.wav格式&#xff0c;如果我們想要提取錄音文件中的文字內容&#xff0c;我們可以采用以下方法&#xff0c;不需要使用Azure Speech API 密鑰注冊通過離線的方式實現。 1.首先我們先在NuGet中下載兩個包 NAudio 2.2.1、Whisper.net 1.7.3…

【py腳本+logstash+es實現自動化檢測工具】

概述 有時候&#xff0c;我們會遇到需要查看服務器的網絡連接或者內存或者其他指標是否有超時&#xff0c;但是每次需要登錄到服務器查看會很不方便,所以我們可以設置一個自動腳本化工具自動幫助我們查看&#xff0c;下面我做了一個demo在windows上面。 一、py腳本 import s…

計算機操作系統與安全復習筆記

1 緒論 操作系統目標: 方便性; 有效性; 可擴充性; 開放性. 作用: 用戶與計算機硬件系統之間的接口; 計算機資源的管理者; 實現了對計算機資源的抽象; 計算機工作流程的組織者. 多道程序設計: 內存中同時存放若干個作業, 使其共享系統資源且同時運行; 單處理機環境下宏觀上并行…

qt5.12.11+msvc編譯器編譯qoci驅動

1.之前編譯過minGW編譯器編譯qoci驅動,很順利就完成了,文章地址:minGW編譯qoci驅動詳解,今天按照之前的步驟使用msvc編譯器進行編譯,直接就報錯了: 查了些資料,發現兩個編譯器在編譯時,pro文件中引用的庫不一樣,下面是msvc編譯器引用的庫,其中編譯引用的庫我這里安裝…