<template>
|
<div>
|
<div>
|
<!-- <iframe
|
:src="'/static/HBarPlanPrint.html?linterid=' + this.$route.query.linterid + '&Type=' + this.$route.query.Type + '&OpenTmp=' + handleMessage.OpenTmp"
|
ref="iframePrint" width="100%" style="height: calc(100vh)"></iframe> -->
|
<div>
|
<!-- 打印预览容器 -->
|
<div id="hiprint-printTemplate"></div>
|
<div class="hiprint-printPagination"></div>
|
|
<el-button @click="handlePrint">打印</el-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { onMounted } from "vue";
|
import { hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint";
|
// 初始化 provider
|
hiprint.init({
|
providers: [defaultElementTypeProvider()],
|
})
|
|
export default {
|
name: 'HBarPlanPrint',
|
data() {
|
return {
|
handleMessage: this.$route.query,
|
hiprintTemplate: undefined,
|
}
|
},
|
created() {
|
|
},
|
mounted() {
|
this.initPrint()
|
},
|
// setup() {
|
// onMounted(() => {
|
|
// buildLeftElement();
|
// })
|
// },
|
methods: {
|
initPrint() {
|
hiprint.init();
|
// <!-- 创建打印模板对象-->
|
this.hiprintTemplate = new hiprint.PrintTemplate();
|
// var hiprintTemplate = new hiprint.PrintTemplate();
|
// <!-- 模板对象添加打印面板 paperHeader：页眉线 paperFooter：页尾线-->
|
var panel = this.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: '二维码', textType: 'qrcode' } });
|
// // <!-- 长文本 打印面板添加长文本元素-->
|
// panel.addPrintLongText({ options: { width: 180, height: 35, top: 90, left: 20, title: '长文本：' } });
|
// // <!-- 表格 打印面板添加表格元素 content为字符串 -->
|
// panel.addPrintTable({ options: { width: 252, height: 35, top: 130, left: 20, content: $('#testTable').html() } });
|
// // <!-- html 打印面板添加自定义html content为字符串或$('..') -->
|
// 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 } });
|
// // <!-- 椭圆 -->
|
// panel.addPrintOval({ options: { width: 135, height: 135, top: 30, left: 20, borderColor: '', borderWidth: 0.75 } });
|
this.hiprintTemplate.design("#hiprint-printTemplate");
|
},
|
handlePrint() {
|
|
this.hiprintTemplate.print()
|
},
|
|
showDesigner() {
|
this.printTemplate.value.design('#hiprint-designTemplate', {
|
// 设计器配置
|
}, (designer) => {
|
// 设计器回调
|
console.log('设计器已加载', designer)
|
})
|
}
|
|
},
|
}
|
|
</script>
|
