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

简介

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

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

引入插件：

jsbarcode：

npm install jsbarcode --save 

socket.io：

npm install socket.io 

jspdf：

npm install jspdf --save 

代码简单介绍

面板

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

<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> 

初始化

在挂载中调用初始化

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

其中初始化方法：

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: [provider.f]});$('.hiprintEpContainer').empty()hiprint.PrintElementTypeManager.build('.hiprintEpContainer', provider.value);$('#hiprint-printTemplate').empty()let templates = this.$ls.get('KEY_TEMPLATES', {}) // 从本地获取数据console.log("getTemplates", templates)let template = templates[provider.value] ? templates[provider.value] : {}hiprintTemplate = new hiprint.PrintTemplate({template: template, // panels: [{...}]dataMode: 1, // 1:getJson 其他：getJsonTid 默认1history: true, // 是否需要 撤销重做功能onDataChanged: (type, json) => {console.log(type); // 新增、移动、删除、修改(参数调整)、大小、旋转console.log(json); // 返回 template// 更新模板hiprintTemplate.update(json)// console.log(hiprintTemplate.historyList)},settingContainer: '#PrintElementOptionSetting',paginationContainer: '.hiprint-printPagination'});hiprintTemplate.design('#hiprint-printTemplate');console.log('hiprintTemplate', hiprintTemplate);// 获取当前放大比例, 当zoom时传true 才会有this.scaleValue = hiprintTemplate.editingPanel.scale || 1;
}, 

设置纸张大小

otherPaper() {let value = {}value.width = this.paperWidthvalue.height = this.paperHeightthis.paperPopVisible = falsethis.setPaper('other', value)
},
/**
 * 设置纸张大小
 * @param type [A3, A4, A5, B3, B4, B5, other]
 * @param value {width,height} mm
 */
setPaper(type, value) {try {if (Object.keys(this.paperTypes).includes(type)) {this.curPaper = {type: type, width: value.width, height: value.height}hiprintTemplate.setPaper(value.width, value.height)} else {this.curPaper = {type: 'other', width: value.width, height: value.height}hiprintTemplate.setPaper(value.width, value.height)}} catch (error) {this.$message.error(`操作失败: ${error}`)}
}, 

通过生命周期activated来解决切换模板的时候还能拖拽，并且不会被清除

activated() {// 重新再实例化, 处理切换demo, 无法拖拽问题if (this.deactivated) {this.changeMode();this.deactivated = false;}
},
deactivated() {this.deactivated = true;
}, 

预览

封装的预览vue界面 将模板和数据用HTML的方法转化赋值 $(‘#preview_content_custom’).html(hiprintTemplate.getHtml(printData))

<template><a-modal :visible="visible" :maskClosable="false" @cancel="hideModal" :width="width+'mm'"><a-spin :spinning="spinning" style="min-height: 100px"><div id="preview_content_custom"></div></a-spin><template slot="title"><a-space><div style="margin-right: 20px">打印预览</div><a-button :loading="waitShowPrinter" type="primary" icon="printer" @click.stop="print">打印</a-button><a-button type="primary" icon="printer" @click.stop="toPdf">pdf</a-button></a-space></template><template slot="footer"><a-button key="close" type="info" @click="hideModal">关闭</a-button></template></a-modal>
</template>

<script> export default {name: "printPreview",props: {},data() {return {visible: false,spinning: true,waitShowPrinter: false,// 纸张宽 mmwidth: 0,// 模板hiprintTemplate: {},// 数据printData: {}}},computed: {},watch: {},created() {},mounted() {},methods: {hideModal() {this.visible = false},show(hiprintTemplate, printData, width = '210') {this.visible = truethis.spinning = truethis.width = widththis.hiprintTemplate = hiprintTemplatethis.printData = printDatasetTimeout(() => {// eslint-disable-next-line no-undef$('#preview_content_custom').html(hiprintTemplate.getHtml(printData))this.spinning = false}, 500)},print() {this.waitShowPrinter = truethis.hiprintTemplate.print(this.printData, {}, {callback: () => {this.waitShowPrinter = false}})},toPdf() {this.hiprintTemplate.toPdf(this.printData, '打印预览pdf');},}
} </script>
<style lang="less" scoped> /deep/ .ant-modal-body {padding: 0px;
}

/deep/ .ant-modal-content {margin-bottom: 24px;
} </style> 

直接打印

直接打印需要安装桌面插件，window.hiwebSocket.opened是为了判断socketIo是否打开，hiprintTemplate中的print2是直接打印，print是会显示预览的打印。直接打印在printIo底层会自动去连接客户端，以及传输数据。

print() {if (window.hiwebSocket.opened) {const printerList = hiprintTemplate.getPrinterList();console.log(printerList) // 打印机列表数据console.log('printData', printData) // 数据源hiprintTemplate.print2(printData, {printer: '', title: 'hiprint测试直接打印'});return}this.$message.error('客户端未连接,无法直接打印')
}, 

批量打印

批量打印就是采用队列打印的方式，通过TaskRunner 任务进程管理，在通过for循环收集数据去打印。

batPrint() { // 批量打印if (window.hiwebSocket.opened) {const printerList = hiprintTemplate.getPrinterList();console.log(printerList) // 打印机列表this.tasksPrint()return}this.$message.error('客户端未连接,无法直接打印')
},
tasksPrint() { // 队列打印const runner = new TaskRunner();runner.setConcurrency(1); // 同时执行数量const task = []let that = thisconst tasksKey = `open${Date.now()}`;for (let i = 0; i < testDatas.table.length; i++) { // 循环数据// done -> 任务完成回调let key = `task${i}`;task.push(done => {let printData = {testChinese: testDatas.table[i].testChinese,testEnglish: testDatas.table[i].testEnglish} // 动态数据console.log('printData', printData)that.realPrint(runner, done, key, i, printData, tasksKey)})}runner.addMultiple(task)this.openNotification(runner, tasksKey)
},
realPrint(runner, done, key, i, printData, tasksKey) {let that = thisthat.$notification.info({key: key,placement: 'topRight',duration: 2.5,message: `正在准备打印第 ${i} 张`,description: '队列运行中...',});let template = that.$ls.get('KEY_TEMPLATES', {}) // 外層還有個模板名包裹let hiprintTemplate = new hiprint.PrintTemplate({template: template.aProviderModule,});hiprintTemplate.print2(printData, {printer: '', title: key});hiprintTemplate.on('printSuccess', function () {let info = runner.tasks.list.length > 1 ? '准备打印下一张' : '已完成打印'that.$notification.success({key: key,placement: 'topRight',message: key + ' 打印成功',description: info,});done()if (!runner.isBusy()) {that.$notification.close(tasksKey)}})hiprintTemplate.on('printError', function () {that.$notification.close(key)done()that.$message.error('打印失败，已加入重试队列中')runner.add(that.realPrint(runner, done, key, i, printData))})
},
openNotification(runner, tasksKey) {let that = this;that.$notification.open({key: tasksKey,message: '队列运行中...',duration: 0,placement: 'topLeft',description: '点击关闭所有任务',btn: h => {return h('a-button',{props: {type: 'danger',size: 'small',},on: {click: () => {that.$notification.close(tasksKey);// 详情请查阅文档runner.removeAll();that.$message.info('已移除所有任务');},},},'关闭任务',);},});
} 

保存JSON数据

只要调用apihiprintTemplate.getJson()

saveJson() {if (hiprintTemplate) {const jsonOut = JSON.stringify(hiprintTemplate.getJson() || {})console.log(jsonOut)}
}, 

自定义组件

封装js中，使用addPrintElementTypes方法添加自定义的组件，可以查看print.io官方文档来配置参数。通过控制台输入window.HIPRINT_CONFIG可以查看配置参数名。

new hiprint.PrintElementTypeGroup("自定义表格1", [{tid: 'aProviderModule.customText1',title: '表格标题',customText: '自定义文本',custom: true,width: 120,type: 'text',options: {height: 31.5,hideTitle: true,field: 'testEnglish',fontSize: 20.25,color: '#000000',backgroundColor: '#ffffff',textAlign: 'center',textContentVerticalAlign: 'middle',lineAlign: 'center',borderLeft: 'solid',borderTop: 'solid',borderRight: 'solid',borderBottom: 'solid'}},{tid: 'aProviderModule.customText2',title: '表格内容',customText: '自定义文本',custom: true,width: 120,type: 'text',options: {hideTitle: true,field: 'testChinese',height: 31.5,fontSize: 20.25,color: '#000000',backgroundColor: '#ffffff',textAlign: 'center',textContentVerticalAlign: 'middle',lineAlign: 'center',borderLeft: 'solid',borderTop: 'solid',borderRight: 'solid',borderBottom: 'solid'}},
]), 

👍创作不易，如有错误请指正，感谢观看！记得点个赞哦！👍

最后

整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。

有需要的小伙伴，可以点击下方卡片领取，无偿分享