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> <...
1.1、新建文件夹和js文件 在根目录src下面新建一个plugins文件夹,下面新建一个print.js文件 也可以直接npm安装插件npm install print-js --save,但直接安装的插件配置会有问题,不建议 print.js代码核心点 在Vue.prototype的原型链上面注入$print方法 $print就是你在页面中调用的方法名称 constMyPlugin={};MyPlugin...
printData)// 数据源hiprintTemplate.print2(printData, {printer:'',title:'hiprint测试直接打印'});return}this.$message.error('客户端未连接,无法直接打印')},
const MyPlugin = {} MyPlugin.install = function (Vue, options) { // 4. 添加实例方法 Vue.prototype.$print = Print } export default MyPlugin 2.main.js 注册模块 1 2 3 // 导入打印组件 import Print from './plugins/print/Print' Vue.use(Print) 3.新建print.vue组件 1 2 3 4 5 6 7...
源码链接: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.前言 首先我们应该清楚两种打印模式: 拖拽生成的html,创建iframe然后调用浏览器提供的printAPI 将生成的html,通过socket.io发送到直接打印客户端再调用electron提供的printAPI
print2 通过客户端静默打印 toPdf 导出pdf文件 举个例子: // ...已省略其他部分, 重要的就是这个 fieldlet template = {panels:[printElements:[{options:{field:'name'}}]]};let hiprintTemplate = new hiprint.PrintTemplate({ template: template});// 打印数据let printData = {name:'这是打印的...
使用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...
window.print() 不能获取打印机列表,无法自动打印 Lodop打印控件 授权费用高 vue-plugin-hiprint 相比上面方案,自带模板设计,并且提供打印客户端,基本满足需求 缺点:hiprint 是闭源的 最后选择使用 vue-plugin-hiprint 开发初版。 功能点实现 隐藏不需要的参数 js复制代码// 配置参数 hiprint.setConfig({ text: { ...
Vue-Plugin-HiPrint 允许您自定义打印样式,以满足您的具体需求。您可以在 预览网站中设计好需要的样式并复制自定义模板的JSON数据,在项目中新建mb.json文件将模板json数据粘贴进去。 使用模板 import mb from './mb.json' function orderPrint(){ let printData = {orderId:'单号',title:'模板标题',table:[{...