超赞vue23可视化打印设计VuePluginPrint

　　今天来给大家推荐一款非常不错的 Vue 可拖拽打印设计器Hiprint。
　　引入使用// main.js中 引入安装
　　import {hiPrintPlugin} from ＂vue-plugin-hiprint＂
　　Vue.use(hiPrintPlugin, ＂$pluginName＂)
　　hiPrintPlugin.disAutoConnect(); // 取消自动连接直接打印客户端
　　// 引入后使用示例
　　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({});
　　参与开发git clone https://gitee.com/CcSimple/vue-plugin-hiprint.git
　　// init
　　cd vue-plugin-hiprint
　　npm i
　　// 调试预览
　　npm run serve
　　// 打包
　　npm run build
　　非常不错的一款集成 vue 可视化打印项目，感兴趣的可以去了解一下。预览地址
　　https://ccsimple.gitee.io/vue-plugin-hiprint/
　　仓库地址
　　https://github.com/CcSimple/vue-plugin-hiprint
　　好了，今天的分享就到这里吧。