vue-plugin-hiprint
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, 理论上应该也是支持其他框架的)
0.0.36起 已支持 CDN形式引入 详见 0.0.36更新记录 uniapp 使用此方式可行
快速链接
hiprint官方文档：http://hiprint.io/docs/start
Demo预览：https://ccsimple.gitee.io/vue-plugin-hiprint/
更新记录：npm包版本及更新记录
打印客户端：https://gitee.com/CcSimple/electron-hiprint
安装使用
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">
项目截图
 |
 |
 |
 |
 |
 |
插件全局引入
// main.js中 引入安装
import {hiPrintPlugin} from 'vue-plugin-hiprint'
Vue.use(hiPrintPlugin, '$pluginName')
hiPrintPlugin.disAutoConnect(); // 取消自动连接直接打印客户端
// 然后使用
this.$pluginName
// 下列代码为示例，不要再 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