首先,你需要通过 npm 或 yarn 安装 vue-plugin-hiprint。 bash npm install vue-plugin-hiprint --save # 或者 yarn add vue-plugin-hiprint 安装完成后,在你的 Vue 项目中引入并使用这个插件。通常,你会在项目的入口文件(如 main.js 或main.ts)中完成这一操作。 javascript import Vue from 'vue'; impor...
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 ...
源码链接: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...
【vue-plugin-hiprint】默认分支是npm包及demo的融合代码;对于部分新手来说有点难以下手。本篇开始以新的demo开始讲述如何开始使用vue-plugin-hiprint。 demo项目通过create-vue创建。默认vue3。 如果你有哪些不清楚的,欢迎各位留言反馈。demo链接见文末。
hiprint.setConfig({ text: { tabs:[] } }) 注意:如果当面板已有元素,那么设置后会使用缓存的参数配置。 此时新拖入一个text元素再次点击它查看就可以了。 2.隐藏/显示/调整 参数 每个参数都是由name和hidden组成的对象,每当点击元素去渲染参数的时候都是依次渲染的;所以排序和隐藏/显示各个参数也就很容易配置...
【vue-plugin-hiprint】[1]默认分支是npm包及demo的融合代码;对于部分新手来说有点难以下手。本篇开始以新的 demo 开始讲述如何开始使用vue-plugin-hiprint。 ❞ demo项目通过create-vue[2]创建。默认 vue3。 如果你有哪些不清楚的,欢迎各位留言反馈。demo链接见文末。 1.安装 npm i vue-plugin-hiprint 引...
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。
源码链接:https://github.com/CcSimple/vue-plugin-hiprint-start 效果如下: 1.前言 首先我们应该清楚两种打印模式: 拖拽生成的html,创建iframe然后调用浏览器提供的printAPI 将生成的html,通过socket.io发送到直接打印客户端再调用electron提供的printAPI