From e8ae17c0fbe5dc0a5424905c738004b143d9ce2c Mon Sep 17 00:00:00 2001
From: zhouwx <1175765986@qq.com>
Date: 星期四, 22 八月 2024 15:04:14 +0800
Subject: [PATCH] 二维码打印排版
---
src/views/hazardousChemicals/electronicWarehouse/components/viewQR.vue | 36 +++++++++++++++++++++++++++---------
1 files changed, 27 insertions(+), 9 deletions(-)
diff --git a/src/views/hazardousChemicals/electronicWarehouse/components/viewQR.vue b/src/views/hazardousChemicals/electronicWarehouse/components/viewQR.vue
index bea1c50..a8f124d 100644
--- a/src/views/hazardousChemicals/electronicWarehouse/components/viewQR.vue
+++ b/src/views/hazardousChemicals/electronicWarehouse/components/viewQR.vue
@@ -12,12 +12,19 @@
</div>
<el-card style="max-width: 480px">
<div :id="state.form.code">
- <div style="display: flex;flex-direction: column;align-items: center;">
- <span style="font-size:14px;margin-top:10px;">{{title}}</span>
- <vue-qr :size="80" :margin="0" :auto-color="true" :dot-scale="1" :text="state.form.code" style="margin: 10px 0 5px 0"></vue-qr>
- <span style="font-size:10px;margin-top:5px;">{{state.form.code}}</span>
+ <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
+ <div style="font-size:14px;margin-bottom: 2px" id="codeTitle">{{title}}</div>
+ <vue-qr :size="100" :correctLevel="3" colorDark="black" :margin="0" :auto-color="true" :text="state.form.code"></vue-qr>
+ <div style="font-size:10px;margin-top: 2px">{{state.form.code}}</div>
</div>
</div>
+<!-- <div :id="state.form.code">-->
+<!-- <div style="display: flex;flex-direction: column;align-items: center;justify-content: center">-->
+<!-- <span style="font-size:14px;margin-bottom: 2px">{{title}}</span>-->
+<!-- <vue-qr :size="100" :correctLevel="3" colorDark="black" :margin="0" :auto-color="true" :text="state.form.code" ></vue-qr>-->
+<!-- <span style="font-size:10px;margin-top: 2px">{{state.form.code}}</span>-->
+<!-- </div>-->
+<!-- </div>-->
</el-card>
</el-dialog>
</div>
@@ -39,9 +46,9 @@
const openDialog = async (type,value) => {
if(type == 'pro'){
- title.value = value.productBasic.name + ' ' + '—' + ' '+ value.productBasic.productSn
+ title.value = value.productBasic.name + '—' + value.productBasic.productSn
}else {
- title.value = value.hazmatBasic.name + ' ' + '—' + ' '+ value.hazmatBasic.productSn
+ title.value = value.hazmatBasic.name + '—' + value.hazmatBasic.productSn
}
state.form = JSON.parse(JSON.stringify(value));
@@ -57,7 +64,7 @@
let qrCodes=''
for(let index in data){
console.log(index,'index')
- qrCodes+=`<div class="my-list-col"><div class="centered-content">${document.getElementById(data[index].code).innerHTML}</div></div>`
+ qrCodes+=`<div class="my-list-col"><div class="centered-content changeFont">${document.getElementById(data[index].code).innerHTML}</div></div>`
}
const printContent=document.createElement('div')
printContent.innerHTML=qrCodes
@@ -76,8 +83,9 @@
<style>
@media print {
.page-break { page-break-after:always;} /* 定义分页符格式*/
- .centered-content { text-align:center;} /* 居中对齐内容*/
+ .centered-content { display: flex;justify-content: center; align-items: center;height: 90vh;} /* 居中对齐内容*/
@page { size:50mm 40mm;margin:0mm; }
+ .changeFont{font-size:12px;transform: scale(0.8);-webkit-transform: scale(0.85);}
}
</style>
</head>
@@ -85,8 +93,18 @@
</html>
`)
printDocument.close()
+ let ct = document.getElementById('codeTitle').offsetWidth
+ console.log('ct',ct)
//在打印窗口中调用打印功能
- console.log('printFrame.contentWindow.document.body.style',printFrame.contentWindow.document.body.style)
+ // debugger
+ // if(ct >= 180) {
+
+ // }else {
+ //
+ // printFrame.contentWindow.document.body.style.zoom = '100%'
+ // }
+
+
printFrame.contentWindow.print()
//移除隐藏的iframe元素
document.body.removeChild(printFrame)
--
Gitblit v1.9.2