vue-plugin-hiprint 是一个Vue插件,它集成了Hiprint的打印功能,使得在Vue项目中实现复杂打印布局变得简单高效。Hiprint是一个强大的HTML5打印库,支持多种打印格式和自定义打印模板,能够轻松实现各种复杂打印需求,如票据、报表、证书等。 二、vue-plugin-hiprint的安装步骤...
源码链接:https://github.com/CcSimple/vue-plugin-hiprint-start ▲本篇效果图 1.编写 provider 并 构建 这里将创建两个provider文件,用于演示如何在两个不同容器中去构建可拖拽元素。 1.1 创建 provider 首先创建provider,直接上代码: // provider1.js ...
demo源码:https://github.com/CcSimple/vue-plugin-hiprint-start demo预览:https://ccsimple.github.io/vue-plugin-hiprint-start/ 本文由mdnice多平台发布
源码链接:https://github.com/CcSimple/vue-plugin-hiprint-start 效果如下: 1.前言 首先我们应该清楚两种打印模式: 拖拽生成的html,创建iframe然后调用浏览器提供的printAPI 将生成的html,通过socket.io发送到直接打印客户端再调用electron提供的printAPI
接下来,是在组件中的使用方法: import {hiPrintPlugin } from 'vue-plugin-hiprint' hiPrintPlugin.disAutoConnect(); //取消自动打印直接连接客户端 hiprint.init(); 在组件中我们需要先取消它的自动连接客户端打印功能,然后初始化vue-plugin-hiprint。
vue-plugin-hiprint 相比上面方案,自带模板设计,并且提供打印客户端,基本满足需求 缺点:hiprint 是闭源的 最后选择使用 vue-plugin-hiprint 开发初版。 功能点实现 隐藏不需要的参数 js复制代码// 配置参数 hiprint.setConfig({ text: { tabs: [], // 隐藏tabs分组 supportOptions: [ { name: 'title', hidden...
安装与初步使用 要将vue-plugin-hiprint融入你的Vue项目,首先需要通过npm或yarn进行安装。这个过程并不复杂,但却是开启后续一切操作的基础。一旦完成安装,接下来就是引入和使用该插件。这一步骤看似简单,实则至关重要。因为只有正确地引入了vue-plugin-hiprint,才能确保后续的功能得以顺利实现。在实际操作中,很多...
本文介绍对vue-plugin-hiprint部分重要代码的解析,这是一个很好的开源插件,能够自己自定义打印模板,通过后端传来的数据进行渲染打印,官方也提供了许多的api供开发者使用。界面采用了antdesign。实现了免预览的直接打印。 github:https://github.com/CcSimple/vue-plugin-hiprint ...
使用npm 或 yarn 安装 Vue-Plugin-HiPrint: npm install vue-plugin-hi-print# 或yarn add vue-plugin-hi-print 2.2 引入并注册插件 在你的 Vue 3 项目入口文件(通常是main.js)中引入并注册插件: import{ createApp }from'vue';importAppfrom'./App.vue';importVueHiPrintfrom'vue-plugin-hi-print';const...