二维码打印

public/print.css

@@ -1,4 +1,13 @@
-.print-title {
-  color: #000000 !important;
-  font-size: 24px;
+@media print {
+  .print-title {
+    color: #000000 !important;
+    font-size: 24px;
+  }
+  #qrCodeBox {
+    img {
+      width: 250px !important;
+      height: 250px !important;
+    }
+  }
 }
+

src/views/emergencyCommandMap/RightSection/JointDuty.vue

@@ -31,7 +31,7 @@
     <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%">
       <div id="qrCodeBox" style="display: flex; flex-direction: column; justify-content: center; align-items: center">
         <div class="print-title" style="margin: 30px 0; color: #ffffff">请联合值守人员通过粤政易/微信扫描二维码进行签到、签退</div>
-        <img :src="qrCodeUrl" alt="" style="width: 800px; height: 800px" />
+        <img class="img" :src="qrCodeUrl" alt="" />
       </div>
       <div class="flex" style="margin-top: 20px">
         <div class="common-btn-primary" v-print="printObj">打印</div>
@@ -43,10 +43,6 @@
 
 <script lang="ts" setup>
 import { getCheckinList } from '@/api/emergencyCommandMap/JointDuty';
-import print from 'vue3-print-nb';
-directives: {
-  print;
-}
 const route = useRoute();
 const tableHeader = reactive([
   {
@@ -67,8 +63,7 @@ let eventId = ref('');
 let qrCodeUrl = ref('');
 let printObj = reactive({
   id: 'qrCodeBox', // 这里是要打印元素的ID
-  popTitle: '',
-  extraCss: '/print.css'
+  popTitle: ''
 });
 const showQrCode = ref(false);
 const handleShowQrCode = () => {
@@ -265,4 +260,14 @@ onMounted(() => {
     }
   }
 }
+.img {
+  width: 800px;
+  height: 800px;
+}
+@media print {
+  :deep(.img) {
+    width: 300px;
+    height: 300px;
+  }
+}
 </style>