解決vue3-print-nb打印二維碼定位(qrcode.vue) 問題

在使用vu3-print-nb搭配qrcode.vue產生二維碼的時候，我的代碼是設置了全部元素都居中顯示的，效果如下

<div id="qrcode"><div style="margin-bottom: 20px">生產工單二維碼</div><div class="qrbox"><qrcode-vuesize="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>

總結

以上是生活随笔為你收集整理的解决vue3-print-nb打印二维码定位(qrcode.vue) 问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。