【開源列印組件】vue-plugin-hiprint初體驗
vue-plugin-hiprint的學習與應用
😄 生命不息，寫作不止
🔥 繼續踏上學習之路，學之分享筆記
👊 總有一天我也能像各位大佬一樣
🏆 一個有夢有戲的人 @怒放吧德德
🌝分享學習心得，歡迎指正，大家一起學習成長！
生命不息，寫作不止，養成良好的學習精神！
簡介
本文介紹對vue-plugin-hiprint部分重要程式碼的解析，這是一個很好的開源插件，能夠自己自定義列印模板，通過後端傳來的數據進行渲染列印，官方也提供了許多的api供開發者使用。介面採用了antdesign。實現了免預覽的直接列印。
github：//github.com/CcSimple/vue-plugin-hiprint
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} = 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'
}
},
]),
👍創作不易，如有錯誤請指正，感謝觀看！記得點個贊哦！👍
