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;
}

最后:一定要在启动了客户端的软件情况下点击打印按钮,不然会报错未连接客户端!

相关推荐
艾小码3 分钟前
localStorage与sessionStorage避坑指南与企业级解决方案
javascript
培根芝士43 分钟前
使用 Canvas 替代 <video> 标签加载并渲染视频
前端·javascript·音视频
德育处主任Pro1 小时前
p5.js 三角形triangle的用法
开发语言·javascript·ecmascript
小螺号dididi吹1 小时前
菜鸟速通:React入门 01
前端·react.js·前端框架
Lstmxx1 小时前
解放前端生产力:我如何用 LLM 和 Bun.js 构建一个 YApi to TypeScript 的自动化代码生成服务
前端·ai编程·mcp
持续前行1 小时前
vue3 : 导出pdf , 除iframe之外 ,还有其他内容一并导出方式
前端·javascript·vue.js
唐某人丶2 小时前
前端仔如何在公司搭建 AI Review 系统
前端·人工智能·aigc
SenLinMu2 小时前
navigator.clipboard.writeText(text) 这段js在本地执行正常,但是在服务器执行失败时为什么?
javascript
RainbowSea2 小时前
伙伴匹配系统(移动端 H5 网站(APP 风格)基于Spring Boot 后端 + Vue3 - 02
java·vue.js·spring boot
没有鸡汤吃不下饭2 小时前
排查vue项目线上才会出现的故障
前端·vue.js·nginx