源码链接:https://github.com/CcSimple/vue-plugin-hiprint-start 效果如下: 1.前言 首先我们应该清楚两种打印模式: 拖拽生成的html,创建iframe然后调用浏览器提供的printAPI 将生成的html,通过socket.io发送到直接打印客户端再调用electron提供的printAPI
let hiprintTemplate = new hiprint.PrintTemplate({xxx}); // 弹出浏览器打印窗口,并填充 字段名:name 的元素 hiprintTemplate.print(printData); let hiprintTemplate2 = new hiprint.PrintTemplate({xxx}); // hiprint对象打印 hiprint.print({ templates: [ { template: hiprintTemplate, data: printData },...
1、安装插件: 1 npm install vue-plugin-hiprint 或 1 yarn add vue-plugin-hiprint 2、普通使用: <template> <el-button-group> <el-button type="primary" @click="print">浏览器打印</el-button> <el-button type="primary" @click="exportJson">导出JSON</el-button> </el-button-group> <...
import{hiprint, defaultElementTypeProvider}from'vue-plugin-hiprint'// 引入后使用示例hiprint.init();// 下列方法都是没有拖拽设计页面的, 相当于代码模式, 使用代码设计页面// 想要实现拖拽设计页面,请往下看 '自定义设计'varhiprintTemplate =newhiprint.PrintTemplate();varpanel = hiprintTemplate.addPrintPanel...
hiprint.init({ host: "https://printjs.cn:17521", // 打印客户端的地址 token: "vue-plugin-hiprint", // 与打印客户端相同的 token }) 初始化 consthiprintTemplate= new hiprint.PrintTemplate() // 因为我个人觉的直接通过打印某个元素区域最好用(最好上手)所以使用的是打印html的方式 ...
window.print() 不能获取打印机列表,无法自动打印 Lodop打印控件 授权费用高 vue-plugin-hiprint 相比上面方案,自带模板设计,并且提供打印客户端,基本满足需求 缺点:hiprint 是闭源的 最后选择使用 vue-plugin-hiprint 开发初版。 功能点实现 隐藏不需要的参数 js复制代码// 配置参数 hiprint.setConfig({ text: { ...
2. 安装和使用 2.1 安装 使用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'vu...
github:https://github.com/CcSimple/vue-plugin-hiprint print.io官网:http://hiprint.io/demo 1|2引入插件: jsbarcode: npm install jsbarcode --save socket.io: npm install socket.io jspdf: npm install jspdf --save 1|3代码简单介绍 1|0面板 ...
vue-plugin-hiprint 包不包含UI界面,需要自行处理。如果想更快速引入请查看sv-print组件库 快速链接 Demo预览:https://ccsimple.gitee.io/vue-plugin-hiprint/(已挂,恢复看gitee官方情况) Github Demo预览:https://ccsimple.github.io/vue-plugin-hiprint/(慢,需翻墙) ...
在上面的示例中,我们使用import引入了自定义模板,使用printData自定义了表单具体数据,最后使用print方法完美实现了打印。 结语 Vue-Plugin-HiPrint 提供了一个强大的、易于使用的打印解决方案,适用于 Vue.js 应用程序。通过创建自定义的打印模板和使用 Vue-Plugin-HiPrint,您可以轻松地实现高度定制的打印功能,满足您的项...