Vue.use(hiPrintPlugin,"$pluginName");// $pluginName 为自定义名称hiPrintPlugin.disAutoConnect();/// 提供的全局方法:/// provider 可为null args: 同模板对应调用 print 方法// 1. 打印this.$pluginName.print(provider, templateJson, ..
vue-plugin-hiprint (基于 hiprint 2.5.4) 当时只是为了方便 我(并非 hiprint 原作者) 在vue 项目中引入使用,所以以此命名。此插件 仅仅是一个 JavaScript【工具库】 而非Vue【组件库】,所以它默认不包含 demo 中的那些组件页面(demo 代码可复制使用)。
import { ref, onMounted } from"vue"; import { hiprint, defaultElementTypeProvider } from"vue-plugin-hiprint";//初始化 providerhiprint.init({ providers: [defaultElementTypeProvider()], });/** * 这里必须要在 onMounted 中去构建 左侧可拖拽元素 或者 设计器 * 因为都是把元素挂载到对应容器中, 必...
import{hiprint,defaultElementTypeProvider}from'vue-plugin-hiprint'// 初始化可拖拽的元素hiprint.init({providers:[newdefaultElementTypeProvider()]})// $('.ep-draggable-item') 包含 tid, 与上边的 provider 中的 tid 对应 才能正常拖拽生成元素hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-i...
源码链接:https://github.com/CcSimple/vue-plugin-hiprint-start ▲本篇效果图 1.编写 provider 并 构建 这里将创建两个provider文件,用于演示如何在两个不同容器中去构建可拖拽元素。 1.1 创建 provider 首先创建provider,直接上代码: // provider1.js ...
简介:本文介绍对vue-plugin-hiprint部分重要代码的解析,这是一个很好的开源插件,能够自己自定义打印模板,通过后端传来的数据进行渲染打印,官方也提供了许多的api供开发者使用。界面采用了antdesign。实现了免预览的直接打印。 vue-plugin-hiprint的学习与应用 ...
源码链接:https://github.com/CcSimple/vue-plugin-hiprint-start 效果如下: 1.前言 首先我们应该清楚两种打印模式: 拖拽生成的html,创建iframe然后调用浏览器提供的printAPI 将生成的html,通过socket.io发送到直接打印客户端再调用electron提供的printAPI
vue-plugin-hiprint插件搭建过程 vue-plugin-hiprint插件搭建过程 在项目根目录打开终端执行安装命令，安装依赖包时要注意版本兼容性。npminstall vue-plugin-hiprint–save这条命令会下载最新稳定版，建议检查package.json里Vue版本是否匹配，2.x和3.x项目要对应不同插件版本。新建components文件夹里的PrintDesigner.vue...
electron-hiprint 该项目是为vue-plugin-hiprint配套开发的静默打印解决方案。我们发现部分使用此项目的开发者拥有自定义的设计器或渲染方案,或者仅需要静默打印一段 HTML、PDF。如果您也有类似需求,electron-hiprint 将是您的理想选择。 快速开始 下载发行版
vue-plugin-hiprint 相比上面方案,自带模板设计,并且提供打印客户端,基本满足需求 缺点:hiprint 是闭源的 最后选择使用 vue-plugin-hiprint 开发初版。 功能点实现 隐藏不需要的参数 js复制代码// 配置参数 hiprint.setConfig({ text: { tabs: [], // 隐藏tabs分组 supportOptions: [ { name: 'title', hidden...