而有了vue-plugin-hiprint之后，这一切又会发生怎样的变化？报表设计与元素编辑 对于需要处理复杂数据的应用来说，报表设计是一个必不可少的功能。vue-plugin-hiprint在这方面同样表现出色，它提供了强大的报表设计能力，能够满足各种复杂的打印需求。无论是简单的标签打印还是详细的财务报表输出，都能轻松应对。每个打印...
import{hiprint,defaultElementTypeProvider}from'vue-plugin-hiprint'// 初始化可拖拽的元素hiprint.init({providers:[newdefaultElementTypeProvider()]})// $('.ep-draggable-item') 包含 tid, 与上边的 provider 中的 tid 对应 才能正常拖拽生成元素hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-i...
hiprint.PrintElementTypeManager.buildByHtml($(".ep-draggable-item")); };/** * 构建设计器 * 注意: 必须要在 onMounted 中去构建 * 因为都是把元素挂载到对应容器中, 必须要先找到该容器*/let hiprintTemplate; const buildDesigner= () =>{ $("#hiprint-printTemplate").empty();//先清空, 避免重...
首先,你需要在你的Vue项目中安装vue-plugin-hiprint插件。可以使用npm或yarn进行安装: bash npm install vue-plugin-hiprint --save # 或者 yarn add vue-plugin-hiprint 2. 在Vue项目中引入vue-plugin-hiprint 在你的Vue项目入口文件(通常是main.js或main.ts)中引入并使用vue-plugin-hiprint插件: ...
vue-plugin-hiprint(基于hiprint 2.5.4) 当时只是为了方便我(并非hiprint原作者)在vue项目中引入使用,所以以此命名。 此插件仅仅是一个JavaScript【工具库】而非Vue【组件库】,所以它默认是不包含demo中所见的那些组件页面的(demo代码随便复制修改拿去用)。
本文介绍对vue-plugin-hiprint部分重要代码的解析,这是一个很好的开源插件,能够自己自定义打印模板,通过后端传来的数据进行渲染打印,官方也提供了许多的api供开发者使用。界面采用了antdesign。实现了免预览的直接打印。 github:https://github.com/CcSimple/vue-plugin-hiprint ...
vue-plugin-hiprint 相比上面方案,自带模板设计,并且提供打印客户端,基本满足需求 缺点:hiprint 是闭源的 最后选择使用 vue-plugin-hiprint 开发初版。 功能点实现 隐藏不需要的参数 js复制代码// 配置参数 hiprint.setConfig({ text: { tabs: [], // 隐藏tabs分组 supportOptions: [ { name: 'title', hidden...
【vue-plugin-hiprint】使用-进阶篇 【vue-plugin-hiprint】使用-入门篇已经知道了如何引入及构建设计器了。本进阶篇教大家如何进一步的构建设计器,包括第二种构建可拖拽元素(provider)、vue3组合式函数、常用API及如何查看可用API等。 源码链接:https://github.com/CcSimple/vue-plugin-hiprint-start...
源码链接:https://github.com/CcSimple/vue-plugin-hiprint-start ▲本篇效果图 1.编写 provider 并 构建 这里将创建两个provider文件,用于演示如何在两个不同容器中去构建可拖拽元素。 1.1 创建 provider 首先创建provider,直接上代码: // provider1.js ...
vue-plugin-hiprint vue-plugin-hiprint(基于hiprint 2.5.4) 当时只是为了方便我(并非hiprint原作者)在vue项目中引入使用,所以以此命名。 此插件仅仅是一个JavaScript【工具库】而非 Vue【组件库】,所以它默认是不包含demo中所见的那些组件页面的(demo代码随便复制修改拿去用)。