打印调试

mes-ui/mes-ui-admin-vue3/src/views/biz/Packaging/printDialog.vue

@@ -42,32 +42,10 @@ const onPrint = () => {
   doc.write(`
     <style type="text/css">
       /* 浏览器打印基本样式 */
-.page {
-  width: 200mm;
-  min-height: 500px;
-  margin: auto;
-  text-align: center;
-  border: 1px #d3d3d3 solid;
-  border-radius: 5px;
-  background: white;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-  position: relative;
-  font-size: 14px !important;
-}
-.qrCodeContainer {
-  width: 200mm;
-  height: 69mm;
-  border: 1px #d3d3d3 solid;
-  border-radius: 5px;
-  background: white;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-  position: relative;
-  font-size: 14px !important;
-}
-
 @page {
-  size: 200mm 70mm landscape;
+  size: 200mm 200mm;
   margin: 0;
+  orientation: portrait; /* 或 portrait 根据实际情况 */
 }
 @media print {
   .page {
@@ -79,29 +57,25 @@ const onPrint = () => {
     box-shadow: initial;
     background: initial;
     page-break-after: always;
+    
   }
 }
 .qr-page {
   page-break-after: always;
+   position: relative; /* 添加 position: relative; 以便使用 top 和 left */
+  transform: rotate(90deg);
+  transform-origin: left bottom; /* 设置旋转原点为左下角 */
+  top:-50mm; /* 调整 top 以确保元素位置正确 */
+  left: 0; /* 调整 left 以确保元素位置正确 */
+  
 }
 .qr-code-container {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: flex-start;
-  width: 200mm;
+ 
-  height: 69mm;
-  margin-bottom: 10px;
 }
-  .qr-code-container-img {
-    width: 70mm;
-    height: 69mm;
-  }
-  .qr-code-container-item {
-    width: 100mm;
-    height: 69mm;
-  }
-
     </style>
     <div>
       ${printNode.innerHTML}
@@ -131,10 +105,10 @@ const datavals = ref([])
 const specarr: any = ref([])
 const cnenList: any = ref([])
 let allSpecs = []
-const open = async (Fdata, vals, val,allSorts) => {
+const open = async (Fdata, vals, val, allSorts) => {
-  console.log(Fdata, vals, val);
+  console.log(Fdata, vals, val)
-  specarr.value=[]
+  specarr.value = []
-  allSpecs=[]
+  allSpecs = []
   //获取中英文对照表
   cnenList.value = await ProjectOrderApi.getcnenList()
 
@@ -252,7 +226,6 @@ defineExpose({ open }) // 提供 open 方法，用于打开弹窗
   page-break-after: always;
 }
 .qr-code-container {
- 
   display: flex;
   justify-content: flex-start;
   align-items: center;
@@ -262,7 +235,7 @@ defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 }
 
 .qr-code-container-item {
-  width: 100mm ;
+  width: 100mm;
   height: 69mm;
 }
 /*