解决vue3-print-nb打印二维码定位(qrcode.vue) 问题

解决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>