// main.js中 引入安装import{hiPrintPlugin}from'vue-plugin-hiprint'Vue.use(hiPrintPlugin,'$pluginName') hiPrintPlugin.disAutoConnect();// 取消自动连接直接打印客户端// 下列代码为示例,不要再 main.js中 使用// 引入后使用示例this.$pluginName.init();// 下列方法都是没有拖拽设计页面的, 相当于代...
hiprint.PrintElementTypeManager.buildByHtml($(".ep-draggable-item")); };/** * 构建设计器 * 注意: 必须要在 onMounted 中去构建 * 因为都是把元素挂载到对应容器中, 必须要先找到该容器*/let hiprintTemplate; const buildDesigner= () =>{ $("#hiprint-printTemplate").empty();//先清空, 避免重...
hiprint for Vue2/Vue3 ⚡打印、打印设计、可视化设计器、报表设计、元素编辑、可视化打印编辑 - CcSimple/vue-plugin-hiprint
【vue-plugin-hiprint】默认分支是npm包及demo的融合代码;对于部分新手来说有点难以下手。本篇开始以新的demo开始讲述如何开始使用vue-plugin-hiprint。 demo项目通过create-vue创建。默认vue3。 如果你有哪些不清楚的,欢迎各位留言反馈。demo链接见文末。 1.安装 npm i vue-plugin-hiprint 引入打印样式print-lock....
本文介绍对vue-plugin-hiprint部分重要代码的解析,这是一个很好的开源插件,能够自己自定义打印模板,通过后端传来的数据进行渲染打印,官方也提供了许多的api供开发者使用。界面采用了antdesign。实现了免预览的直接打印。 github:https://github.com/CcSimple/vue-plugin-hiprint ...
在上面的代码中,你可以在 Vue.use(VuePluginHiprint, options) 中传入配置选项来配置插件。具体的配置选项取决于 vue-plugin-hiprint 的 API 文档,通常可能包括 API 密钥、服务器地址等。 4. 调用 vue-plugin-hiprint 插件的 API 进行打印操作 在Vue 组件中,你可以通过 this.$hiprint 来访问 vue-plugin-hiprint...
源码链接:https://github.com/CcSimple/vue-plugin-hiprint-start 1.编写 provider 并 构建 这里将创建两个provider文件,用于演示如何在两个不同容器中去构建可拖拽元素。 1.1 创建 provider 首先创建provider,直接上代码: // provider1.js import { hiprint } from "vue-plugin-hiprint"; ...
hiprint.setConfig({ text: { tabs: [ { name:'基础',// 可调整名称 // 整体替换: 相当于移除所有options, 重新插入新的参数 // replace: true, options: [ {name:"title", hidden:true} ] } ] } }) 注意:tabs的replace相当于移除所有options,重新插入新的参数;如果想要修改第2个tab,那么需要把他...
源码链接: https://github.com/CcSimple/vue-plugin-hiprint-start ▲本篇效果图 1.编写 provider 并 构建 这里将创建两个provider文件,用于演示如何在两个不同容器中去构建可拖拽元素。 1.1 创建 provider 首先创建provider,直接上代码: // provider1.jsimport { hiprint } from "vue-plugin-hiprint";export...
vue-plugin-hiprint(基于hiprint 2.5.4) 当时只是为了方便我(并非hiprint原作者)在vue项目中引入使用,所以以此命名。 此插件仅仅是一个JavaScript【工具库】而非 Vue【组件库】,所以它默认是不包含demo中所见的那些组件页面的(demo代码随便复制修改拿去用)。