解决vue3-print-nb打印二维码定位(qrcode.vue) 问题
在使用vu3-print-nb搭配qrcode.vue产生二维码的时候,我的代码是设置了全部元素都居中显示的,效果如下
<div id="qrcode">
<div style="margin-bottom: 20px">生产工单二维码</div>
<div class="qrbox">
<qrcode-vue
size="300"
class="code"
:value="`workOrder-8bRDO7ieHOU4kVO2-${qrCodeInfo.id}`"
></qrcode-vue>
</div>
<div style="margin-top: 30px; margin-bottom: 20px">
工单id: {{ qrCodeInfo.id }}
</div>
<div class="text">客户名称: {{ qrCodeInfo.customerName }}</div>
<div class="text">产品名称: {{ qrCodeInfo.productName }}</div>
<div class="text">产品编号: {{ qrCodeInfo.productNumber }}</div>
<div>订单编号: {{ qrCodeInfo.orderNo }}</div>
</div>
<style lang="scss" scoped>
#qrcode {
text-align: center;
font-weight: 700;
font-size: 20px;
.text {
margin-bottom: 20px;
}
}
</style>
但当点击打印的时候,打印页面的二维码就不会自动居中,而是跑到了左上角
所以想要解决使二维码居中或者是其他位置的时候就要在css里面更改如下代码,注意一定要写
@media print,而@media print里面的class就是修改打印页面样式的class。
我这里给包裹二维码的box设置了class =“qrbox”,所以在qrbox里面修改二维码的样式,不过注意的是 transform: translate();这类属性在对qrcode二维码进行位置的修改是不起作用的,所以我这里是给了一个相对定位并且使用top,left等属性对二维码进行定位,完成效果如下
<style lang="scss" scoped>
#qrcode {
text-align: center;
font-weight: 700;
font-size: 20px;
.text {
margin-bottom: 20px;
}
}
@media print {
#qrcode {
position: relative;
text-align: center;
font-weight: 700;
font-size: 60px;
.qrbox {
width: 50%;
position: relative;
left: 23%;
top: 25px;
margin-bottom: 100px;
margin-top: 100px;
.code {
// height: 500px;
width: 100%;
}
}
}
}
</style>