hiprint for Vue2/Vue3 ⚡打印、打印设计

关于此插件

vue-plugin-hiprint(基于hiprint 2.5.4) 当时只是为了方便我（并非hiprint原作者） 在vue项目中引入使用，所以以此命名。

此插件仅仅是一个JavaScript【工具库】而非 Vue【组件库】，所以它默认是不包含demo中所见的那些组件页面的（demo代码随便复制修改拿去用）。

由于hiprint官网最后一次更新时间为2019年【hiprint 2.5.4 是 LGPL 协议】，后在诸多使用者及反馈下进行了许多优化调整。详情（同时感谢各位群友支持和参与）

vue-plugin-hiprint

hiprint for Vue2.x / Vue3.x (基于jQuery, 理论上应该也是支持其他框架的)

jQuery/uniapp 项目 见下方 [jQuery/uniapp 项目使用](#jQuery/uniapp 项目使用)

注意事项!! 不要用本项目设计导出的模板,在官网提供的版本中使用! 不要用本项目设计导出的模板,在官网提供的版本中使用! 不要用本项目设计导出的模板,在官网提供的版本中使用! 请使用我提供的打印客户端,或者自行修改打印客户端的源码,以适配本项目的模板! 请使用我提供的打印客户端,或者自行修改打印客户端的源码,以适配本项目的模板! 请使用我提供的打印客户端,或者自行修改打印客户端的源码,以适配本项目的模板! 主分支是融合版本的最新代码,如果你不需要修改 hiprint 相关代码. 请使用 npm 包的方式安装. 使用直接客户端时,本地开发连接没问题,部署到线上出现跨域无法连接打印客户端问题: 线上跨域问题,请升级 https! 说明:https://www.cnblogs.com/daysme/p/15493523.html 线上跨域问题,请升级 https! 说明:https://www.cnblogs.com/daysme/p/15493523.html 线上跨域问题,请升级 https! 说明:https://www.cnblogs.com/daysme/p/15493523.html 快速链接

Demo预览：https://ccsimple.gitee.io/vue-plugin-hiprint/

更新记录：npm包版本及更新记录

打印客户端：https://gitee.com/CcSimple/electron-hiprint

文章链接

入门篇: 【vue-plugin-hiprint】使用-入门篇

进阶篇: 【vue-plugin-hiprint】使用-进阶篇

provider: 【vue-plugin-hiprint】如何自定义可拖拽元素 provider

打印篇: 【vue-plugin-hiprint】使用-打印篇

参数篇: 【vue-plugin-hiprint】使用-参数篇

实战动态provider: 【vue-plugin-hiprint】实战-动态provider

实战动态模板: 【vue-plugin-hiprint】实战-动态模板

常见问题汇总①: 【vue-plugin-hiprint】常见问题汇总①

常见问题汇总②: 【vue-plugin-hiprint】常见问题汇总②

常见问题汇总③: 【vue-plugin-hiprint】常见问题汇总③

更多参数的文档请仔细查阅文档

hiprint官方文档：http://hiprint.io/docs/start

本人写的部分文档: https://ccsimple.gitee.io/sv-print-docs/config/hiprint.html

安装使用

npm install vue-plugin-hiprint

<!--【必须】在index.html 文件中添加打印所需样式(此cdn可能不稳定):--> <link rel="stylesheet" type="text/css" media="print" href="https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@latest/dist/print-lock.css"> <!-- 可以调整成 相对链接/自有链接, 【重要】名称需要一致 【print-lock.css】--> <link rel="stylesheet" type="text/css" media="print" href="/print-lock.css"> 项目截图

拖拽设计使用

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({}); vue/vue3 全局引入

全局引入，方便在任何地方不引入直接调用打印。示例为代码模式 (拖拽设计请往下看)

// main.js中 引入安装 import {hiPrintPlugin} from 'vue-plugin-hiprint' Vue.use(hiPrintPlugin, '$pluginName') hiPrintPlugin.disAutoConnect(); // 取消自动连接直接打印客户端 // 下列代码为示例，不要再 main.js中 使用 // 引入后使用示例 this.$pluginName.init(); // 下列方法都是没有拖拽设计页面的, 相当于代码模式, 使用代码设计页面 // 想要实现拖拽设计页面,请往下看 '自定义设计' var hiprintTemplate = new this.$pluginName.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打印,浏览器在的地方他都可以运行' } }); //表格 panel.addPrintTable({ options: { width: 252, height: 35, top: 130, left: 20, content: $('#testTable').html() } }); //Html panel.addPrintHtml({ options: { width: 140, height: 35, top: 180, left: 20, content:'' } }); //竖线//不设置宽度 panel.addPrintVline({ options: { height: 35, top: 230, left: 20 } }); //横线 //不设置高度 panel.addPrintHline({ options: { width: 140, top: 245, left: 120 } }); //矩形 panel.addPrintRect({ options: { width: 35, height: 35, top: 230, left: 60 } }); //打印 hiprintTemplate.print({}); //直接打印，需要安装客户端 hiprintTemplate.print2({}); jQuery/uniapp 项目使用

uniapp 需要嵌入到 web 浏览器中.(需要支持 window 全局对象环境)

<!-- index.html --> <head> <!-- 打印样式是必须的，你可以调整成自由链接， 注意名称 print-lock.css --> <link rel="stylesheet" type="text/css" media="print" href="https://unpkg.com/vue-plugin-hiprint@latest/dist/print-lock.css" /> <!-- 下列使用的都是 unpkg提供的 稳定性未知, 建议下载自行处理 --> <!-- jquery 必须 --> <script src="https://unpkg.com/jquery@3.6.1/dist/jquery.js"></script> <!-- 条形码 --> <script src="https://unpkg.com/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script> <!-- 颜色选择器 --> <script src="https://unpkg.com/@claviska/jquery-minicolors@2.3.6/jquery.minicolors.min.js"></script> <!-- 直接打印(print2)需要 --> <script src="https://unpkg.com/socket.io-client@4.5.1/dist/socket.io.min.js"></script> <!-- toPdf需要 --> <script src="https://unpkg.com/canvg@3.0.10/lib/umd.js"></script> <script src="https://unpkg.com/jspdf@2.5.1/dist/jspdf.umd.min.js"></script> <script src="https://unpkg.com/html2canvas@1.4.1/dist/html2canvas.js"></script> <!-- vue-plugin-hiprint