import { hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint"; // 初始化可拖拽的元素 hiprint.init({ providers: [new defaultElementTypeProvider()], }); // $('.ep-draggable-item') 包含 tid, 与上边的 provider 中的 tid 对应 才能正常拖拽生成元素 hiprint.PrintElementTypeManager.buildByHtml($(".ep-draggable-item")); hiprintTemplate = new hiprint.PrintTemplate({ template: {}, // 模板json settingContainer: "#PrintElementOptionSetting", // 元素参数容器 paginationContainer: ".hiprint-printPagination", // 多面板的容器， 实现多面板， 需要在添加一个 <div class="hiprint-printPagination"/> // ------- 下列是可选功能 ------- // ------- 下列是可选功能 ------- // ------- 下列是可选功能 ------- // 图片选择功能 onImageChooseClick: (target) => { // 测试 3秒后修改图片地址值 setTimeout(() => { // target.refresh(url,options,callback) // callback(el, width, height) // 原元素,宽,高 // target.refresh(url,false,(el,width,height)=>{ // el.options.width = width; // el.designTarget.css('width', width + "pt"); // el.designTarget.children('.resize-panel').trigger($.Event('click')); // }) target.refresh( "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtAAAAIIAQMAAAB99EudAAAABlBMVEUmf8vG2O41LStnAAABD0lEQVR42u3XQQqCQBSAYcWFS4/QUTpaHa2jdISWLUJjjMpclJoPGvq+1WsYfiJCZ4oCAAAAAAAAAAAAAAAAAHin6pL9c6H/fOzHbRrP0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0u/SY9LS0tLS0tLS0tLS0n+edm+UlpaWlpaWlpaWlpaW/tl0Ndyzbno7/+tPTJdd1wal69dNa6abx+Lq6TSeYtK7BX/Diek0XULSZZrakPRtV0i6Hu/KIt30q4fM0pvBqvR9mvsQkZaW9gyJT+f5lsnzjR54xAk8mAUeJyMPwYFH98ALx5Jr0kRLLndT7b64UX9QR/0eAAAAAAAAAAAAAAAAAAD/4gpryzr/bja4QgAAAABJRU5ErkJggg==", { // auto: true, // 根据图片宽高自动等比(宽>高?width:height) // width: true, // 按宽调整高 // height: true, // 按高调整宽 real: true, // 根据图片实际尺寸调整(转pt) } ); }, 3000); // target.getValue() // target.refresh(url) }, // 自定义可选字体 // 或者使用 hiprintTemplate.setFontList([]) // 或元素中 options.fontList: [] fontList: [ { title: "微软雅黑", value: "Microsoft YaHei" }, { title: "黑体", value: "STHeitiSC-Light" }, { title: "思源黑体", value: "SourceHanSansCN-Normal" }, { title: "王羲之书法体", value: "王羲之书法体" }, { title: "宋体", value: "SimSun" }, { title: "华为楷体", value: "STKaiti" }, { title: "cursive", value: "cursive" }, ], dataMode: 1, // 1:getJson 其他：getJsonTid 默认1 history: true, // 是否需要 撤销重做功能 onDataChanged: (type, json) => { // 模板发生改变回调 console.log(type); // 新增、移动、删除、修改(参数调整)、大小、旋转 console.log(json); // 返回 template }, onUpdateError: (e) => { // 更新失败回调 console.log(e); }, }); // 设计器的容器 hiprintTemplate.design("#hiprint-printTemplate");

import { hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint"; // 引入后使用示例 hiprint.init(); // 下列方法都是没有拖拽设计页面的, 相当于代码模式, 使用代码设计页面 var hiprintTemplate = new hiprint.PrintTemplate(); var panel = hiprintTemplate.addPrintPanel({ width: 100, height: 130, paperFooter: 340, paperHeader: 10, }); //文本 panel.addPrintText({ options: { width: 140, height: 15, top: 20, left: 20, title: "hiprint插件手动添加text", textAlign: "center", }, }); //条形码 panel.addPrintText({ options: { width: 140, height: 35, top: 40, left: 20, title: "123456", textType: "barcode", }, }); //二维码 panel.addPrintText({ options: { width: 35, height: 35, top: 40, left: 165, title: "123456", textType: "qrcode", }, }); //长文本 panel.addPrintLongText({ options: { width: 180, height: 35, top: 90, left: 20, title: "长文本：hiprint是一个很好的webjs打印,浏览器在的地方他都可以运行", }, }); //打印 hiprintTemplate.print({});

// main.js中 引入安装 import { hiPrintPlugin } from "vue-plugin-hiprint"; Vue.use(hiPrintPlugin, "$pluginName"); // $pluginName 为自定义名称 hiPrintPlugin.disAutoConnect(); /// 提供的全局方法： // this.$pluginName == hiprint 全局对象 let hiprintTemplate = this.$pluginName.PrintTemplate({ template: {}, // 模板json [对象] }); hiprintTemplate.print({name:'i不简'}); /// provider 不能为null, 可以为 undefined args: 同模板对应调用 print 方法 // 1. 打印 this.$print(undefined, templateJson, ...args); this.$print(provider, templateJson, ...args); // 2. 直接打印 this.print2(undefined, templateJson, ...args); this.print2(provider, templateJson, ...args);

/**  * 从 在index.html添加:  * <link rel="stylesheet" type="text/css" media="print" href="https://npmmirror.com/package/vue-plugin-hiprint/files/dist/print-lock.css">  * 或者  * <link rel="stylesheet" type="text/css" media="print" href="https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@latest/dist/print-lock.css">  * 以处理打印所需css, 当然你也可以自行处理  * 比如： index.html目录下放一个print-lock.css, 然后在index.html添加:  * <link rel="stylesheet" type="text/css" media="print" href="/print-lock.css">  */ // 添加自定义样式 hiprintTemplate.print( this.printData, {}, { styleHandler: () => { // 这里拼接成放html->head标签内的css/style // 1.例如：使用hiprin官网的样式 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; }, } ); // 直接打印 hiprintTemplate.print2(this.printData, { styleHandler: () => { // 这里拼接成放html->head标签内的css/style // 1.例如：使用hiprin官网的样式 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; }, });

/**  * 取消自动连接  */ // 在main.js中设置 import { hiPrintPlugin } from "vue-plugin-hiprint"; Vue.use(hiPrintPlugin, "$hiprint", false); // hiPrintPlugin 同时提供了 disAutoConnect 方法 hiPrintPlugin.disAutoConnect(); // 在组件中使用 见： demo/design/index.vue import { disAutoConnect, autoConnect, hiprint } from "vue-plugin-hiprint"; disAutoConnect(); // 同时 export了 autoConnect，disAutoConnect 方法 /**  * 连接回调及打印  */ autoConnect((status, msg) => { if (status) { hiprintTemplate.print2(printData, { printer: "", title: "hiprint测试打印", }); } }); /**  * socket连接报错？  * 由于npm包更新到socket.io 3.x版本，官网提供的客户端，npm包是无法连接的  * 请使用gitee提供的客户端, 同时gitee客户端可传更多的参数， 如是否打印颜色/打印份数/DPI等  * 详情electron见：https://www.electronjs.org/zh/docs/latest/api/web-contents  */

// 浏览器预览打印, 无法监听是否点击了 打印/取消 按钮 hiprintTemplate.print( this.printData, {}, { callback: () => { console.log("浏览器打印窗口已打开"); }, } ); // 直接打印 // 打印机名称: 通过 hiprintTemplate.getPrinterList() 获取 其中的 name hiprintTemplate.print2(printData, { printer: "打印机名称", title: "打印标题" }); hiprintTemplate.on("printSuccess", function (data) { console.log("打印完成"); }); hiprintTemplate.on("printError", function (data) { console.log("打印失败"); });

hiprint.init({ host: "http://localhost:17521", // 可在此处设置连接地址与端口号 token: "token", // 可在此处设置连接 token 可缺省 });

hiprint.init({ lang: "en", // 设置语言 ['cn', 'en', 'de', 'es', 'fr', 'it', 'ja', 'ru', 'cn_tw'] });

// 快速显示/隐藏 打印iframe 方便调试 ￣□￣｜｜ // 在浏览器控制台输入： // 显示打印页面 $("#app").css("display", "none"); $("#hiwprint_iframe").css("visibility", "visible"); $("#hiwprint_iframe").css("width", "100%"); $("#hiwprint_iframe").css("height", "251.09mm"); // 这里替换个实际高度才能显示完 // 显示vue页面 $("#app").css("display", "block"); $("#hiwprint_iframe").css("visibility", "hidden");

// js window.open("hiprint://"); // element-ui this.$alert( `连接【${hiwebSocket.host}】失败！<br>请确保目标服务器已<a href="https://gitee.com/CcSimple/electron-hiprint/releases" target="_blank"> 下载 </a> 并 <a href="hiprint://" target="_blank"> 运行 </a> 打印服务！`, "客户端未连接", { dangerouslyUseHtmlString: true } ); // ant-design this.$error({ title: "客户端未连接", content: (h) => ( <div> 连接【{hiwebSocket.host}】失败！ <br /> 请确保目标服务器已 <a href="https://gitee.com/CcSimple/electron-hiprint/releases" target="_blank" > 下载 </a>并<a href="hiprint://" target="_blank"> 运行 </a> 打印服务！ </div> ), });

import { hiprint } from "vue-plugin-hiprint"; hiprint.init({ host: "https://v4.printjs.cn:17521", // 此处输入服务启动后的地址 token: "hiprint-17521", // 用于鉴权的token，hiprint* （*可替换为[0-9a-zA-Z\-_]字符） }); // or hiwebSocket.setHost("https://printjs.cn:17521", "vue-plugin-hiprint");