import { ref, onMounted } from"vue"; import { hiprint, defaultElementTypeProvider } from"vue-plugin-hiprint";//初始化 providerhiprint.init({ providers: [defaultElementTypeProvider()], });/** * 这里必须要在 onMounted 中去构建 左侧可拖拽元素 或者 设计器 * 因为都是把元素挂载到对应容器中, 必...
vue-plugin-hiprint 是一个Vue插件,它集成了Hiprint的打印功能,使得在Vue项目中实现复杂打印布局变得简单高效。Hiprint是一个强大的HTML5打印库,支持多种打印格式和自定义打印模板,能够轻松实现各种复杂打印需求,如票据、报表、证书等。 二、vue-plugin-hiprint的安装步骤...
npm i vue-plugin-hiprint 引入打印样式print-lock.css 从node_modules/vue-plugin-hiprint/dist/目录下复制一份print-lock.css到静态资源目录public下 在public/index.html中添加样式如下图: 这个打印样式是必须要引入的,否则会 打印重叠,多出一页。 如何检查是否引入成功呢? 浏览器控制台查看 查看print-lock.css...
源码链接: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"; ...
hiprint.setConfig({ text: { tabs: [ { name:'基础',// 可忽略 options: []// 必须包含这个 options }, { name:'样式', } ] } }) 3.查看参数 可选值 很多新手小白或者后端大佬😄(大佬们都是直接上手 vue 的)们不知道某个参数有哪些值,于是乎在配置provider的时候不怎么写,安排: ...
【vue-plugin-hiprint】[1]默认分支是npm包及demo的融合代码;对于部分新手来说有点难以下手。本篇开始以新的 demo 开始讲述如何开始使用vue-plugin-hiprint。 ❞ demo项目通过create-vue[2]创建。默认 vue3。 如果你有哪些不清楚的,欢迎各位留言反馈。demo链接见文末。 1.安装 npm i vue-plugin-hiprint 引...
项目使用 在使用无预览打印时如果我们需要对打印内容设置样式,那我们需要把样式写成行内样式不然不会生效. // 全局引入 // main.js import { hiPrintPlugin } from 'vue-plugin-hiprint' Vue.use(hiPrintPlugin, '$pluginName') // 局部引入 import { hiPrintPlugin } from 'vue-plugin-hiprint' ...
实现无预览打印的Vue2项目中，产品需求不支持浏览器直接调用打印机以避免安全风险。在gitee.com/CcSimple/vue-plugin-hiprint和gitee.com/CcSimple/electron-hiprint/releases地址中，提供了解决方案。首先，在项目入口文件index.html中，安装依赖。项目中实现无预览打印需确保打印内容样式设置为行内样式，以...
源码链接:https://github.com/CcSimple/vue-plugin-hiprint-start 效果如下: 1.前言 首先我们应该清楚两种打印模式: 拖拽生成的html,创建iframe然后调用浏览器提供的printAPI 将生成的html,通过socket.io发送到直接打印客户端再调用electron提供的printAPI