今天来给大家推荐一款非常不错的 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

好了，今天的分享就到这里吧。