一、vue-plugin-hiprint插件及其功能vue-plugin-hiprint 是一个Vue插件,它集成了Hiprint的打印功能,使得在Vue项目中实现复杂打印布局变得简单高效。Hiprint是一个强大的HTML5打印库,支持多种打印格式和自定义打印模板,能够轻松实现各种复杂打印需求,如票据、报表、证书等。
源码链接:https://github.com/CcSimple/vue-plugin-hiprint-start 1.编写 provider 并 构建 这里将创建两个provider文件,用于演示如何在两个不同容器中去构建可拖拽元素。 1.1 创建 provider 首先创建provider,直接上代码: // provider1.js import { hiprint } from "vue-plugin-hiprint"; export const provider1...
import { ref, onMounted } from"vue"; import { hiprint, defaultElementTypeProvider } from"vue-plugin-hiprint";//初始化 providerhiprint.init({ providers: [defaultElementTypeProvider()], });/** * 这里必须要在 onMounted 中去构建 左侧可拖拽元素 或者 设计器 * 因为都是把元素挂载到对应容器中, 必...
hiprintTemplate.print2(printData); // 批量直接打印 hiprintTemplate.print2([printData,printData2]); // 直接打印回调 // 发送任务到打印机成功 hiprintTemplate.on('printSuccess', function (e) {}) // 发送任务到打印机失败 hiprintTemplate.on('printError', function (e) {}) 由于客户端原理一样是...
hiprint.setConfig({ text: { tabs: [ { name:'基础',// 可调整名称 // 整体替换: 相当于移除所有options, 重新插入新的参数 // replace: true, options: [ {name:"title", hidden:true} ] } ] } }) 注意:tabs的replace相当于移除所有options,重新插入新的参数;如果想要修改第2个tab,那么需要把他...
接下来,是在组件中的使用方法: import {hiPrintPlugin } from 'vue-plugin-hiprint' hiPrintPlugin.disAutoConnect(); //取消自动打印直接连接客户端 hiprint.init(); 在组件中我们需要先取消它的自动连接客户端打印功能,然后初始化vue-plugin-hiprint。
最后选择使用 vue-plugin-hiprint 开发初版。 功能点实现 隐藏不需要的参数 js复制代码// 配置参数 hiprint.setConfig({ text: { tabs: [], // 隐藏tabs分组 supportOptions: [ { name: 'title', hidden: true, }, { name: 'fontSize', hidden: false, }, ], }, }); 查看所有参数:window.HIPRI...
使用npm 或 yarn 安装 Vue-Plugin-HiPrint: npm install vue-plugin-hi-print# 或yarn add vue-plugin-hi-print 2.2 引入并注册插件 在你的 Vue 3 项目入口文件(通常是main.js)中引入并注册插件: import{ createApp }from'vue';importAppfrom'./App.vue';importVueHiPrintfrom'vue-plugin-hi-print';const...
vue-plugin-hiprint(基于hiprint 2.5.4) 当时只是为了方便我(并非hiprint原作者)在vue项目中引入使用,所以以此命名。 此插件仅仅是一个JavaScript【工具库】而非Vue【组件库】,所以它默认是不包含demo中所见的那些组件页面的(demo代码随便复制修改拿去用)。