vue-plugin-hiprint 是一个用于 Vue.js 项目的插件,它提供了与 Hiprint 打印服务集成的功能。下面我将根据你提供的提示,分点介绍如何使用 vue-plugin-hiprint 插件。 1. 安装 vue-plugin-hiprint 插件 首先,你需要在你的 Vue 项目中安装 vue-plugin-hiprint 插件。你可以使用 npm 或 yarn 来安装: bash npm ...
hiprint.PrintElementTypeManager.buildByHtml($(".ep-draggable-item")); };/** * 构建设计器 * 注意: 必须要在 onMounted 中去构建 * 因为都是把元素挂载到对应容器中, 必须要先找到该容器*/let hiprintTemplate; const buildDesigner= () =>{ $("#hiprint-printTemplate").empty();//先清空, 避免重...
源码链接: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...
let css = '' // 2.重写样式:所有文本红色 css += '.hiprint-printElement-text{color:red !important;}' return css } }); 由于打印原理是生成html调用浏览器打印。所以如果批量打印传的数据过多会造成浏览器卡死/等待时间长等问题。 5 直接打印 直接打印其实就是将填充完数据的html通过socket.io连接发送...
hiprint.setConfig({ text: { tabs:[] } }) 注意:如果当面板已有元素,那么设置后会使用缓存的参数配置。 此时新拖入一个text元素再次点击它查看就可以了。 2.隐藏/显示/调整 参数 每个参数都是由name和hidden组成的对象,每当点击元素去渲染参数的时候都是依次渲染的;所以排序和隐藏/显示各个参数也就很容易配置...
vue-plugin-hiprint 相比上面方案,自带模板设计,并且提供打印客户端,基本满足需求 缺点:hiprint 是闭源的 最后选择使用 vue-plugin-hiprint 开发初版。 功能点实现 隐藏不需要的参数 js复制代码// 配置参数 hiprint.setConfig({ text: { tabs: [], // 隐藏tabs分组 supportOptions: [ { name: 'title', hidden...
接下来,是在组件中的使用方法: import {hiPrintPlugin } from 'vue-plugin-hiprint' hiPrintPlugin.disAutoConnect(); //取消自动打印直接连接客户端 hiprint.init(); 在组件中我们需要先取消它的自动连接客户端打印功能,然后初始化vue-plugin-hiprint。
本文介绍对vue-plugin-hiprint部分重要代码的解析,这是一个很好的开源插件,能够自己自定义打印模板,通过后端传来的数据进行渲染打印,官方也提供了许多的api供开发者使用。界面采用了antdesign。实现了免预览的直接打印。 github:https://github.com/CcSimple/vue-plugin-hiprint ...
安装与初步使用 要将vue-plugin-hiprint融入你的Vue项目，首先需要通过npm或yarn进行安装。这个过程并不复杂，但却是开启后续一切操作的基础。一旦完成安装，接下来就是引入和使用该插件。这一步骤看似简单，实则至关重要。因为只有正确地引入了vue-plugin-hiprint，才能确保后续的功能得以顺利实现。在实际操作中，很多...