解决打印预览文字换行

src/views/purchasingManage/purchaseOrder/invoice/components/print-template-wl.vue

@@ -1,6 +1,6 @@
 <template>
   <ele-modal
-    title="出库单"
+    title="入库单"
     :visible.sync="QRvisible"
     v-if="QRvisible"
     width="90%"
@@ -21,14 +21,35 @@
           font-weight: 800;
           text-decoration: underline;
         "
-        >{{groupName||"湖南万隆智能科技有限公司采购入库单"}}</div
+        >{{ groupName || '湖南万隆智能科技有限公司采购入库单' }}</div
       >
-      <div style="display: flex; justify-content: space-between;width: 100%;margin-bottom: 10px;">
-        <span style="flex: 3">供应商：{{ formData.supplierName }}</span>
-        <span style="flex: 1">日期：{{ formData.receiveDate }}</span>
-        <span style="flex: 2">编号：{{ formData.receiveNo }}</span>
+      <div
+        style="
+          display: flex;
+          justify-content: space-between;
+          width: 100%;
+          min-width: 800px; 
+          margin-bottom: 10px;
+        "
+      >
+        <span style="flex: 2; white-space: nowrap; padding-right: 10px"
+          >供应商：{{ formData.supplierName }}</span
+        >
+        <span style="flex: 1; white-space: nowrap; padding: 0 10px"
+          >日期：{{ formData.receiveDate }}</span
+        >
+        <span style="flex: 2; white-space: nowrap; padding-left: 10px"
+          >编号：{{ formData.receiveNo }}</span
+        >
       </div>
-      <div style="display: flex; justify-content: space-between;width: 100%;margin-bottom: 10px;">
+      <div
+        style="
+          display: flex;
+          justify-content: space-between;
+          width: 100%;
+          margin-bottom: 10px;
+        "
+      >
         <span style="flex: 1">摘要：</span>
       </div>
       <table
@@ -39,7 +60,8 @@
           table-layout: fixed;
           word-break: break-all;
           word-wrap: break-word;
-          font-size: 12px;margin-bottom: 10px;
+          font-size: 12px;
+          margin-bottom: 10px;
         "
       >
         <tbody>
@@ -73,16 +95,24 @@
             <td style="padding: 5px" colspan="2">合计 </td>
             <td style="padding: 5px" colspan="7">
               <div style="display: flex; justify-content: space-between">
-                <span style="flex: 1">本页数量小计：{{ this.getAll('totalCount') }}</span>
-                <span style="flex: 1">本页金额小计：{{ this.getAll('totalPrice') }}</span>
-                <span style="flex: 1">汇总数量：{{ this.getAll('totalCount') }}</span>
-                <span style="flex: 1">汇总金额：{{ this.getAll('totalPrice') }}</span>
+                <span style="flex: 1"
+                  >本页数量小计：{{ this.getAll('totalCount') }}</span
+                >
+                <span style="flex: 1"
+                  >本页金额小计：{{ this.getAll('totalPrice') }}</span
+                >
+                <span style="flex: 1"
+                  >汇总数量：{{ this.getAll('totalCount') }}</span
+                >
+                <span style="flex: 1"
+                  >汇总金额：{{ this.getAll('totalPrice') }}</span
+                >
               </div>
             </td>
           </tr>
         </tbody>
       </table>
-      <div style="display: flex; justify-content: space-between;width: 100%;">
+      <div style="display: flex; justify-content: space-between; width: 100%">
         <span style="flex: 1">审核：</span>
         <span style="flex: 1">业务员：</span>
         <span style="flex: 1">验收：</span>
@@ -98,60 +128,60 @@
 </template>
 
 <script>
-  import { getReceiveSaleOrderrecordDetail } from '@/api/purchasingManage/purchaseorderreceive';
+import { getReceiveSaleOrderrecordDetail } from '@/api/purchasingManage/purchaseorderreceive';
+
+import { mapGetters } from 'vuex';
+export default {
+  name: 'print',
+  computed: {
+    ...mapGetters(['user'])
+  },
+  props: {
+    groupName: ''
+  },
+  data() {
+    return {
+      QRvisible: false,
+      formData: {}
+    };
+  },
 
-  import { mapGetters } from 'vuex';
-  export default {
-    name: 'print',
-    computed: {
-      ...mapGetters(['user'])
+  methods: {
+    async open(id) {
+      this.formData = await getReceiveSaleOrderrecordDetail(id);
+      this.QRvisible = true;
     },
-    props: {
-      groupName:'',
+    close() {
+      this.QRvisible = false;
     },
-    data() {
-      return {
-        QRvisible: false,
-        formData: {}
-      };
+    getAll(key) {
+      let num = 0;
+      this.formData.productList.forEach((item) => {
+        if (item[key]) {
+          num += Number(item[key]);
+        }
+      });
+      return num;
     },
-
-    methods: {
-      async open(id) {
-        this.formData = await getReceiveSaleOrderrecordDetail(id);
-        this.QRvisible = true;
-      },
-      close() {
-        this.QRvisible = false;
-      },
-      getAll(key) {
-        let num = 0;
-        this.formData.productList.forEach((item) => {
-          if (item[key]) {
-            num += Number(item[key]);
-          }
-        });
-        return num;
-      },
-      print() {
-        const printSection = document.getElementById('printSection');
-        // 创建打印任务
-        const printWindow = window.open('', '_blank');
-        printWindow.document.open();
-        printWindow.document.write('<html><head><title>打印预览</title>');
-        printWindow.document.write(
-          '<link rel="stylesheet" href="your-stylesheet-url.css" type="text/css" />'
-        );
-        printWindow.document.write('</head><body>');
-        printWindow.document.write(printSection.innerHTML);
-        printWindow.document.write('</body></html>');
-        printWindow.document.close();
-        printWindow.onload = function () {
-          printWindow.print();
-        };
-      }
+    print() {
+      const printSection = document.getElementById('printSection');
+      // 创建打印任务
+      const printWindow = window.open('', '_blank');
+      printWindow.document.open();
+      printWindow.document.write('<html><head><title>打印预览</title>');
+      printWindow.document.write(
+        '<link rel="stylesheet" href="your-stylesheet-url.css" type="text/css" />'
+      );
+      printWindow.document.write('</head><body>');
+      printWindow.document.write(printSection.innerHTML);
+      printWindow.document.write('</body></html>');
+      printWindow.document.close();
+      printWindow.onload = function () {
+        printWindow.print();
+      };
     }
-  };
+  }
+};
 </script>
 
 <style lang="scss"></style>