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.$ = jquery4、在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;
}最后：一定要在启动了客户端的软件情况下点击打印按钮，不然会报错未连接客户端！
原文地址：https://blog.csdn.net/weixin_52115201/article/details/144746019
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！