【开源打印组件】vue-plugin-hiprint初体验

简介

本文介绍对vue-plugin-hiprint部分重要代码的解析，这是一个很好的开源插件，能够自己自定义打印模板，通过后端传来的数据进行渲染打印，官方也提供了许多的api供开发者使用。界面采用了antdesign。实现了免预览的直接打印。

github：github.com/CcSimple/vu… print.io官网：hiprint.io/demo

引入插件：

jsbarcode：

npm install jsbarcode --save 
1

socket.io：

npm install socket.io 
1

jspdf：

npm install jspdf --save 
1

代码简单介绍

面板

分别是：拖拽组件、画布、属性栏

<a-row :gutter="[8,0]"><a-col :span="4"><a-card style="height: 100vh"><a-row><a-col :span="24" class="rect-printElement-types hiprintEpContainer"></a-col></a-row></a-card></a-col><a-col :span="14"><a-card class="card-design"><div id="hiprint-printTemplate" class="hiprint-printTemplate"></div></a-card></a-col><a-col :span="6" class="params_setting_container"><a-card><a-row class="hinnn-layout-sider"><div id="PrintElementOptionSetting"></div></a-row></a-card></a-col>
</a-row> 
1
2

初始化

在挂载中调用初始化

mounted() {this.init()this.otherPaper()
}, 
1
2

其中初始化方法：

init() { // 左边设计模板的选择this.modeList = providers.map((e) => {return {type: e.type, name: e.name, value: e.value}})this.changeMode()
},
changeMode() { // 数据渲染let {mode} = thislet provider = providers[mode]console.log("provider", provider)hiprint.init({providers: 
1
2