国外网站模板网站建设,网站 转成 微信小程序,乌克兰军事最新消息,怎样查看一个网站是用什么开源程序做的代码地址是#xff1a;vue-plugin-hiprint: hiprint for Vue2/Vue3 ⚡打印、打印设计、可视化设计器、报表设计、元素编辑、可视化打印编辑
本地安装包地址#xff1a;electron-hiprint 发行版 - Gitee.com
1、先安装hipint安装包在本地 2、项目运行npm#xff08;socket.…代码地址是vue-plugin-hiprint: hiprint for Vue2/Vue3 ⚡打印、打印设计、可视化设计器、报表设计、元素编辑、可视化打印编辑
本地安装包地址electron-hiprint 发行版 - Gitee.com
1、先安装hipint安装包在本地 2、项目运行npmsocket.io是为了实现自动打印下载的
npm install vue-plugin-hiprint
npm i jquery --save-d
npm install socket.io3、在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 relstylesheet typetext/css mediaprint href% BASE_URL %print-lock.css/link
link relstylesheet typetext/css mediaprint hrefhttps://cdn.jsdelivr.net/npm/vue-plugin-hiprintlatest/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:htmlhead${styleStr}/headbody${v.innerHTML}/body /html } })}) this.$message({message: 正在执行打印操作请稍等……,type: success,offset:350});hiprintTemplate.print2()//直接静默打印//hiprintTemplate.print() 预览打印
}
6、在App.vue加上隐藏的样式这样不影响页面样式
#hiwprint_iframe{display: none !important;
}
最后一定要在启动了客户端的软件情况下点击打印按钮不然会报错未连接客户端
