代碼地址是: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;
}
最后:一定要在啟動了客戶端的軟件情況下點擊打印按鈕,不然會報錯未連接客戶端!