let css = '<link href="http://hiprint.io/Content/hiprint/css/print-lock.css" media="print" rel="stylesheet">' // 2.重写样式:所有文本红色 css += '<style>.hiprint-printElement-text{color:red !important;}</style>' return css } }); 由于打印原理是生成html调用浏览器打印。所以如果批量打...
源码链接: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...
hiprint.PrintElementTypeManager.buildByHtml($(".ep-draggable-item")); };/** * 构建设计器 * 注意: 必须要在 onMounted 中去构建 * 因为都是把元素挂载到对应容器中, 必须要先找到该容器*/let hiprintTemplate; const buildDesigner= () =>{ $("#hiprint-printTemplate").empty();//先清空, 避免重...
ms)); const printQueue = async () => { for (const item of printItemListFilter) { // 每次打印延迟5s,防止过快导致打印机接收不到 // await delay(5000) let hiprintTemplate = new hiprint.Print
源码链接:https://github.com/CcSimple/vue-plugin-hiprint-start 效果如下: 1.前言 首先我们应该清楚两种打印模式: 拖拽生成的html,创建iframe然后调用浏览器提供的printAPI 将生成的html,通过socket.io发送到直接打印客户端再调用electron提供的printAPI
源码链接:https://github.com/CcSimple/vue-plugin-hiprint-start ▲本篇效果图 1.编写 provider 并 构建 这里将创建两个provider文件,用于演示如何在两个不同容器中去构建可拖拽元素。 1.1 创建 provider 首先创建provider,直接上代码: // provider1.js ...
本文介绍对vue-plugin-hiprint部分重要代码的解析,这是一个很好的开源插件,能够自己自定义打印模板,通过后端传来的数据进行渲染打印,官方也提供了许多的api供开发者使用。界面采用了antdesign。实现了免预览的直接打印。 github:https://github.com/CcSimple/vue-plugin-hiprint ...
npm install vue-plugin-hiprint <!--【必须】在index.html 文件中添加打印所需样式(此cdn可能不稳定):--><linkrel="stylesheet"type="text/css"media="print"href="https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@latest/dist/print-lock.css"><!-- 可以调整成 相对链接/自有链接, 【重要】名称需要...
Vue.use(VuePluginHiPrint); 这会将 Vue-Plugin-HiPrint 注册为 Vue 插件,使其可用于您的整个应用程序。 2、组件中引入 import {hiPrintPlugin } from 'vue-plugin-hiprint' 创建打印模板 在开始打印之前,您需要创建打印模板。Vue-Plugin-HiPrint 使用 HiPrint 作为底层打印引擎,它支持使用 HTML 和 CSS 创建高度...
npm i vue-plugin-hiprint 引入「打印样式」print-lock.css 从node_modules/vue-plugin-hiprint/dist/目录下复制一份print-lock.css到静态资源目录public下 在public/index.html 中添加样式如下图: ▲添加打印样式 ❝ 这个打印样式是必须要引入的,否则会 打印重叠,多出一页。 ❞ 如何检查是否引入成功呢...