【开源打印组件】vue-plugin-hiprint初体验
vue-plugin-hiprint的学习与应用
生命不息,写作不止
继续踏上学习之路,学之分享笔记
总有一天我也能像各位大佬一样
一个有梦有戏的人 @怒放吧德德
分享学习心得,欢迎指正,大家一起学习成长!
生命不息,写作不止,养成良好的学习精神!
简介
本文介绍对vue-plugin-hiprint部分重要代码的解析,这是一个很好的开源插件,能够自己自定义打印模板,通过后端传来的数据进行渲染打印,官方也提供了许多的api供开发者使用。界面采用了antdesign。实现了免预览的直接打印。
github:https://github.com/CcSimple/vue-plugin-hiprint
print.io官网:http://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} = this
let 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 默认1
history: 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.paperWidth
value.height = this.paperHeight
this.paperPopVisible = false
this.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,
// 纸张宽 mm
width: 0,
// 模板
hiprintTemplate: {},
// 数据
printData: {}
}
},
computed: {},
watch: {},
created() {
},
mounted() {
},
methods: {
hideModal() {
this.visible = false
},
show(hiprintTemplate, printData, width = '210') {
this.visible = true
this.spinning = true
this.width = width
this.hiprintTemplate = hiprintTemplate
this.printData = printData
setTimeout(() => {
// eslint-disable-next-line no-undef
$('#preview_content_custom').html(hiprintTemplate.getHtml(printData))
this.spinning = false
}, 500)
},
print() {
this.waitShowPrinter = true
this.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 = this
const 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 = this
that.$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'
}
},
]),
创作不易,如有错误请指正,感谢观看!记得点个赞哦!
【开源打印组件】vue-plugin-hiprint初体验的更多相关文章
- 【docker Elasticsearch】Rest风格的分布式开源搜索和分析引擎Elasticsearch初体验
概述: Elasticsearch 是一个分布式.可扩展.实时的搜索与数据分析引擎. 它能从项目一开始就赋予你的数据以搜索.分析和探索的能力,这是通常没有预料到的. 它存在还因为原始数据如果只是躺在磁 ...
- VUE 3.0 初体验之路
在2020年9月中旬,vue.js发布了3.0正式版,在不久的将来,VUE3.0 也终将成为大前端的必然趋势, 环境搭建 node 版本要求: Node.js8.9 或更高版本 ,输入 node -v ...
- 手动搭建webpack + vue项目之初体验
在使用vue做开发时,大部分人只会使用官方提供的脚手架搭建项目,脚手架虽然很好用,但想要成为一名优秀的前端开发者,webpack这一道坎是绕不开的,所以我们要学会脱离脚手架,利用webpack手动搭建 ...
- Vue Cli 3 初体验(全面详解)
vue新出了 vue cli 3,并直接改名为 @vue/cli,今天就来盘他. 首先介绍等啰里啰嗦的就不写了,贴个link吧. Vue CLi3 github Vue CLi web 要是想先了解下 ...
- Vue.js-Vue的初体验
我是参考https://www.cnblogs.com/kidney/p/6052935.html 这位大神的 最开始接触vue的时候,是他的input框输入的文字和旁边的span展示的文字同步,当时 ...
- vue.js2.0 自定义组件初体验
理解 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...
- vue组件化初体验 全局组件和局部组件
vue组件化初体验 全局组件和局部组件 vue组件化 全局组件 局部组件 关于vue入门案例请参阅 https://www.cnblogs.com/singledogpro/p/11938222.h ...
- 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...
- 基于 Webpack & Vue & Vue-Router 的 SPA 初体验
基于 Webpack & Vue & Vue-Router 的 SPA 初体验 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com ...
随机推荐
- 图片放在div中低下会出现一条缝
页面要达到的样子 中间写的是时候是向div里面放一张图片就行了 <head> <link rel="stylesheet" href="reset.cs ...
- NC202492 仓库选址
NC202492 仓库选址 题目 题目描述 牛能在某小城有了固定的需求,为了节省送货的费用,他决定在小城里建一个仓库,但是他不知道选在哪里,可以使得花费最小. 给出一个 \(m \times n\) ...
- halcon数组的一些使用
没啥好讲的,这里对于不是数组部分的东西就不进行讲解了. area_center(RegionOpening,Area, Row, Column).使用area_center来求区域的中心和面积时,返回 ...
- OneOS下调试支持的几种方式
方法论 当我们遇到问题,应该怎么办?这不仅应用于程序开发,也是我们在生活中遇到问题的时候,应该想的事儿,怎么办!趁着此次机会,我好好想了七秒钟. 先问是不是问题,如果不是就不用解决了 如果确实是问题, ...
- NGINX屏蔽垃圾爬虫
if ($http_user_agent ~* (80legs.com|Abonti|AcoonBot|Acunetix|adbeat_bot|AddThis.com|adidxbot|ADmantX ...
- 07 MySQL_SQL语言分类
SQL语言分类 DDL Data Definition Language 数据定义语言 包括: create , alter ,drop , truncate; 不支持事务 DML Data Mani ...
- 03 uniapp自定义导航栏的开发
在我眼里自定义导航分2类: 原生基础上 || 非原生基础上 总结:项目当中能原生就原生,提高性能 区别 uni-app 自带原生导航栏,在pages.json里配置. 原生导航的体验更好,渲染新页面时 ...
- 第46届ICPC澳门站 K - Link-Cut Tree // 贪心 + 并查集 + DFS
原题链接:K-Link-Cut Tree_第46屆ICPC 東亞洲區域賽(澳門)(正式賽) (nowcoder.com) 题意: 要求一个边权值总和最小的环,并从小到大输出边权值(2的次幂):若不存在 ...
- tarjan算法和缩点
tarjan可以找强连通的分量,但它的作用不只局限于此 缩点,说白了,就是建新图,之后的操作在新图上进行 自己看代码 #include<bits/stdc++.h> using names ...
- 第十五天python3 文件IO(一)
一.文件打开 open(path,flag[,encoding][,errors]) 参数说明: path:要打开文件的路径 flag:打开方式( r:以只读的方式打开文件,文件的描述符放在文件开头 ...