工单打印

src/components/print/OrderPrint.vue

@@ -1,7 +1,7 @@
 <template>
   <ele-modal :visible.sync="visible" type="工单打印" width="1200px">
     <div class="print-container" ref="pagesRef">
-      <el-row class="main-data mb-16">
+      <el-row class="main-data">
         <el-col :span="6">
           <div class="bg"> 生产工单号 </div>
           <div class="code">条码区</div>
@@ -323,7 +323,13 @@
 </template>
 
 <script>
-  import { downloadPDF } from '@/utils/pdf.js';
+  import {
+    downloadPDF,
+    canvasSplit,
+    a4Height,
+    a4Width,
+    margin
+  } from '@/utils/pdf.js';
   import { printWorkOrderInfo } from '@/api/produceOrder/index.js';
   export default {
     props: {
@@ -340,7 +346,7 @@
         default: ''
       }
     },
-    data () {
+    data() {
       return {
         visible: false,
         typeList: {
@@ -361,7 +367,7 @@
             key: 'brandNo',
             span: 8,
             class: 'border-dashed-right border-dashed-bottom',
-            formatter (itm) {
+            formatter(itm) {
               return itm.workReportCategoryList[0]?.brandNum;
             }
           },
@@ -370,7 +376,7 @@
             key: 'xxx',
             span: 4,
             class: 'border-dashed-right border-dashed-bottom',
-            formatter (itm) {
+            formatter(itm) {
               return itm.workReportCategoryList[0]?.batchNo;
             }
           },
@@ -379,7 +385,7 @@
             key: 'feedingWeight',
             span: 4,
             class: 'border-dashed-right border-dashed-bottom',
-            formatter (itm) {
+            formatter(itm) {
               return itm.workReportCategoryList[0]?.number;
             }
           },
@@ -388,7 +394,7 @@
             key: 'standardNum',
             span: 4,
             class: 'border-dashed-right border-dashed-bottom',
-            formatter (itm) {
+            formatter(itm) {
               return itm.productInfo?.standardNum;
             }
           },
@@ -397,7 +403,7 @@
             key: 'noStandardNum',
             span: 4,
             class: 'border-dashed-bottom',
-            formatter (itm) {
+            formatter(itm) {
               return itm.productInfo?.noStandardNum;
             }
           },
@@ -407,7 +413,7 @@
             key: 'deviceCode',
             span: 8,
             class: 'border-dashed-right border-dashed-bottom',
-            formatter (itm) {
+            formatter(itm) {
               const obj = itm.workReportDeviceList.find(
                 (i) => i.rootCategoryLevelId == 4
               );
@@ -419,7 +425,7 @@
             key: 'xxx',
             span: 8,
             class: 'border-dashed-right border-dashed-bottom',
-            formatter (itm) {
+            formatter(itm) {
               const obj = itm.workReportDeviceList.find(
                 (i) => i.rootCategoryLevelId == 5
               );
@@ -431,7 +437,7 @@
             key: 'xxx',
             span: 4,
             class: 'border-dashed-right border-dashed-bottom',
-            formatter (itm) {
+            formatter(itm) {
               const obj = itm.workReportDeviceList.find(
                 (i) => i.rootCategoryLevelId == 8
               );
@@ -443,7 +449,7 @@
             key: 'boatNum',
             span: 4,
             class: 'border-dashed-bottom',
-            formatter (itm) {
+            formatter(itm) {
               const obj = itm.workReportDeviceList.find(
                 (i) => i.rootCategoryLevelId == 8
               );
@@ -456,7 +462,7 @@
             key: 'stampingTimes',
             span: 4,
             class: 'border-dashed-right border-dashed-bottom',
-            formatter (itm) {
+            formatter(itm) {
               const obj = itm.workReportDeviceList.find(
                 (i) => i.rootCategoryLevelId == 5
               );
@@ -494,7 +500,7 @@
             key: 'dryingDuration',
             span: 8,
             class: 'border-dashed-right border-dashed-bottom',
-            formatter (itm) {
+            formatter(itm) {
               return itm.workReportArea?.extraField?.dryTime;
             }
           },
@@ -503,7 +509,7 @@
             key: 'standardNum',
             span: 4,
             class: 'border-dashed-right border-dashed-bottom',
-            formatter (itm) {
+            formatter(itm) {
               return itm.productInfo?.standardNum;
             }
           },
@@ -512,7 +518,7 @@
             key: 'noStandardNum',
             span: 4,
             class: 'border-dashed-bottom',
-            formatter (itm) {
+            formatter(itm) {
               return itm.productInfo?.noStandardNum;
             }
           },
@@ -521,7 +527,7 @@
             key: 'areaCode',
             span: 8,
             class: 'border-dashed-bottom',
-            formatter (itm) {
+            formatter(itm) {
               return itm.workReportArea?.code;
             }
           },
@@ -531,7 +537,7 @@
             key: 'xxx',
             span: 8,
             class: 'border-dashed-right ',
-            formatter (itm) {
+            formatter(itm) {
               const obj = itm.workReportDeviceList.find(
                 (i) => i.rootCategoryLevelId == 8
               );
@@ -564,7 +570,7 @@
             key: 'temperatureRamp',
             span: 8,
             class: 'border-dashed-right border-dashed-bottom',
-            formatter (itm) {
+            formatter(itm) {
               const obj = itm.workReportDeviceList.find(
                 (i) => i.rootCategoryLevelId == 4
               );
@@ -582,7 +588,7 @@
             key: 'standardNum',
             span: 4,
             class: 'border-dashed-right border-dashed-bottom',
-            formatter (itm) {
+            formatter(itm) {
               return itm.productInfo?.standardNum;
             }
           },
@@ -591,7 +597,7 @@
             key: 'noStandardNum',
             span: 4,
             class: 'border-dashed-bottom',
-            formatter (itm) {
+            formatter(itm) {
               return itm.productInfo?.noStandardNum;
             }
           },
@@ -600,7 +606,7 @@
             key: 'deviceCode',
             span: 4,
             class: ' border-dashed-bottom',
-            formatter (itm) {
+            formatter(itm) {
               const obj = itm.workReportDeviceList.find(
                 (i) => i.rootCategoryLevelId == 4
               );
@@ -613,7 +619,7 @@
             key: 'xxx',
             span: 8,
             class: 'border-dashed-right',
-            formatter (itm) {
+            formatter(itm) {
               const obj = itm.workReportDeviceList.find(
                 (i) => i.rootCategoryLevelId == 8
               );
@@ -652,7 +658,7 @@
             key: 'standardNum',
             span: 4,
             class: 'border-dashed-right border-dashed-bottom',
-            formatter (itm) {
+            formatter(itm) {
               return itm.productInfo?.standardNum;
             }
           },
@@ -661,7 +667,7 @@
             key: 'noStandardNum',
             span: 4,
             class: 'border-dashed-bottom',
-            formatter (itm) {
+            formatter(itm) {
               return itm.productInfo?.noStandardNum;
             }
           },
@@ -670,7 +676,7 @@
             key: 'deviceCode',
             span: 8,
             class: ' border-dashed-bottom',
-            formatter (itm) {
+            formatter(itm) {
               const obj = itm.workReportDeviceList.find(
                 (i) => i.rootCategoryLevelId == 4
               );
@@ -683,7 +689,7 @@
             key: 'xxx',
             span: 4,
             class: 'border-dashed-right',
-            formatter (itm) {
+            formatter(itm) {
               const obj = itm.workReportDeviceList.find(
                 (i) => i.rootCategoryLevelId == 8
               );
@@ -695,7 +701,7 @@
             key: 'boatNum',
             span: 4,
             class: 'border-dashed-right',
-            formatter (itm) {
+            formatter(itm) {
               const obj = itm.workReportDeviceList.find(
                 (i) => i.rootCategoryLevelId == 8
               );
@@ -728,7 +734,7 @@
             key: 'xxx',
             span: 8,
             class: 'border-dashed-right',
-            formatter (itm) {
+            formatter(itm) {
               const obj = itm.workReportCategoryList.find(
                 (i) => i.rootCategoryLevelId == 9
               );
@@ -740,7 +746,7 @@
             key: 'deviceCode',
             span: 4,
             class: 'border-dashed-right',
-            formatter (itm) {
+            formatter(itm) {
               const obj = itm.workReportDeviceList.find(
                 (i) => i.rootCategoryLevelId == 4
               );
@@ -779,7 +785,7 @@
             key: 'standardNum',
             span: 4,
             class: 'border-dashed-right border-dashed-bottom',
-            formatter (itm) {
+            formatter(itm) {
               return itm.productInfo?.standardNum;
             }
           },
@@ -788,7 +794,7 @@
             key: 'noStandardNum',
             span: 4,
             class: 'border-dashed-bottom border-dashed-right',
-            formatter (itm) {
+            formatter(itm) {
               return itm.productInfo?.noStandardNum;
             }
           },
@@ -797,7 +803,7 @@
             key: 'deviceCode',
             span: 4,
             class: 'border-dashed-right border-dashed-bottom',
-            formatter (itm) {
+            formatter(itm) {
               const obj = itm.workReportDeviceList.find(
                 (i) => i.rootCategoryLevelId == 4
               );
@@ -971,7 +977,7 @@
             key: 'standardNum',
             span: 4,
             class: 'border-dashed-right border-dashed-bottom',
-            formatter (itm) {
+            formatter(itm) {
               return itm.productInfo?.standardNum;
             }
           },
@@ -980,7 +986,7 @@
             key: 'noStandardNum',
             span: 4,
             class: 'border-dashed-bottom',
-            formatter (itm) {
+            formatter(itm) {
               return itm.productInfo?.noStandardNum;
             }
           },
@@ -989,7 +995,7 @@
             key: 'deviceCode',
             span: 4,
             class: 'border-dashed-right',
-            formatter (itm) {
+            formatter(itm) {
               const obj = itm.workReportDeviceList.find(
                 (i) => i.rootCategoryLevelId == 4
               );
@@ -1022,7 +1028,7 @@
             key: 'xxx',
             span: 4,
             class: 'border-dashed-right border-dashed-bottom',
-            formatter (itm) {
+            formatter(itm) {
               return itm?.packInfo?.packDemand;
             }
           },
@@ -1031,7 +1037,7 @@
             key: 'xxx',
             span: 4,
             class: 'border-dashed-right border-dashed-bottom',
-            formatter (itm) {
+            formatter(itm) {
               return itm?.packInfo?.packUnit;
             }
           },
@@ -1040,7 +1046,7 @@
             key: 'xxx',
             span: 4,
             class: 'border-dashed-right border-dashed-bottom',
-            formatter (itm) {
+            formatter(itm) {
               return itm?.packInfo?.packNum;
             }
           },
@@ -1049,7 +1055,7 @@
             key: 'xxx',
             span: 4,
             class: 'border-dashed-right border-dashed-bottom',
-            formatter (itm) {
+            formatter(itm) {
               return `PCS/${itm.packInfo.packUnit}`;
             }
           },
@@ -1058,7 +1064,7 @@
             key: 'xxx',
             span: 4,
             class: 'border-dashed-right border-dashed-bottom',
-            formatter (itm) {
+            formatter(itm) {
               return itm?.packInfo?.netWeight;
             }
           },
@@ -1067,7 +1073,7 @@
             key: 'xxx',
             span: 4,
             class: ' border-dashed-bottom',
-            formatter (itm) {
+            formatter(itm) {
               return itm?.packInfo?.roughWeight;
             }
           },
@@ -1076,7 +1082,7 @@
             key: 'xxx',
             span: 4,
             class: 'border-dashed-right border-dashed-bottom',
-            formatter (itm) {
+            formatter(itm) {
               return itm?.packInfo?.surplusNum;
             }
           },
@@ -1106,7 +1112,7 @@
             key: 'xxx',
             span: 4,
             class: 'border-dashed-right border-dashed-bottom',
-            formatter (itm) {
+            formatter(itm) {
               const obj = itm.workReportDeviceList.find(
                 (i) => i.rootCategoryLevelId == 9
               );
@@ -1136,11 +1142,11 @@
     },
 
     methods: {
-      open () {
+      open() {
         this.visible = true;
         this.init();
       },
-      init () {
+      init() {
         for (const p of this.processList) {
           this.$set(p, 'list', []);
         }
@@ -1155,15 +1161,40 @@
           }
         });
       },
-      cancel () {
+      cancel() {
         this.visible = false;
       },
       //打印
-      handlePrint () {
+      handlePrint() {
         this.PrintLoading = true;
-        downloadPDF(this.$refs.pagesRef).then(() => {
-          this.PrintLoading = false;
-        });
+        const page = this.$refs.pagesRef;
+        const pHeight = page.offsetHeight;
+        const pWidth = page.offsetWidth;
+
+        const lineHeight = 36;
+
+        const onePageHeight = (a4Height / a4Width) * pWidth;
+
+        const maxPageHeight = Math.min(
+          Math.floor(onePageHeight / lineHeight) * lineHeight,
+          pHeight
+        );
+
+        let leftH = pHeight;
+
+        const splitPos = [];
+
+        do {
+          splitPos.push(
+            (splitPos[splitPos.length - 1] || 0) +
+              (leftH > maxPageHeight ? maxPageHeight : leftH)
+          );
+          leftH -= maxPageHeight;
+        } while (leftH > 0);
+
+        downloadPDF(page, splitPos, '生产工单').then(
+          () => (this.PrintLoading = false)
+        );
       }
     }
   };
@@ -1172,7 +1203,7 @@
   $heihgt: 36px;
   $border: 1px solid #ddd;
   * {
-    box-sizing: border-box;
+    box-sizing: border-box !important;
   }
   .bg {
     background-color: #f1f1f1;

src/utils/pdf copy.js

@@ -0,0 +1,89 @@
+import html2canvas from 'html2canvas';
+import jsPDF from 'jspdf';
+
+const ratio = 1; //放大 兼容低分辨率屏幕清晰度
+
+const margin = 10; //边距
+// A4宽高
+const a4Width = 595.28;
+const a4Height = 841.89;
+// let pdf = null;
+export const downloadPDF = (page, fileName = '工单') => {
+  // direction : 方向
+  return new Promise((resolve, reject) => {
+    html2canvas(page, { scale: ratio }).then(function (canvas) {
+      var contentWidth = canvas.width;
+      var contentHeight = canvas.height;
+
+      //一页pdf显示html页面生成的canvas高度;
+      var pageHeight = (contentWidth / a4Width) * a4Height;
+      //未生成pdf的html页面高度
+      var leftHeight = contentHeight;
+      //页面偏移
+      var position = 10;
+      //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
+      var imgWidth = a4Width - margin * 2;
+      var imgHeight = (imgWidth / contentWidth) * contentHeight;
+
+      console.log(imgHeight, 'imgHeight');
+
+      var pageData = canvas.toDataURL('image/jpeg', 1.0);
+
+      var pdf = new jsPDF('', 'pt', 'a4');
+
+      console.log(canvasSplit(canvas, imgWidth, a4Height - 20));
+
+      //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
+      //当内容未超过pdf一页显示的范围，无需分页
+      if (leftHeight < pageHeight) {
+        pdf.addImage(pageData, 'JPEG', margin, position, imgWidth, imgHeight);
+      } else {
+        while (leftHeight > 0) {
+          pdf.addImage(pageData, 'JPEG', margin, position, imgWidth, imgHeight);
+          console.log(leftHeight, pageHeight, position);
+          leftHeight -= pageHeight;
+          position -= pageHeight;
+          //避免添加空白页
+          if (leftHeight > 0) {
+            pdf.addPage();
+          }
+        }
+      }
+
+      pdf.save(`${fileName}.pdf`);
+      const blob = pdf.output('blob');
+      var blob_url = URL.createObjectURL(blob);
+      window.open(blob_url);
+      pdf = null;
+      resolve();
+    });
+  });
+};
+
+function canvasSplit (canvas, width, height) {
+  const pageList = [];
+  const contentHeight = canvas.height;
+
+  let leftHeight = (width / canvas.width) * contentHeight;
+
+  console.log('leftHeight', leftHeight);
+  const can = document.createElement('canvas');
+
+  can.width = width;
+  can.height = height;
+
+  const ctx = can.getContext('2d');
+
+  const imgHeight = (canvas.width / width) * height;
+
+  while (leftHeight > 0) {
+    ctx.drawImage(canvas, 0, 0, canvas.width, imgHeight, 0, 0, width, height);
+    pageList.push(canvas.toDataURL('image/jpeg', 1.0));
+    ctx.clearRect(0, 0, 0, 0);
+    leftHeight -= imgHeight;
+
+    console.log('leftHeight', leftHeight, imgHeight);
+  }
+
+  return pageList;
+}

src/utils/pdf.js

@@ -3,87 +3,44 @@ import jsPDF from 'jspdf';
 
 const ratio = 1; //放大 兼容低分辨率屏幕清晰度
 
-const margin = 10; //边距
+export const margin = 10; //边距
 // A4宽高
-const a4Width = 595.28;
-const a4Height = 841.89;
+export const a4Width = 595.28;
+export const a4Height = 841.89;
 // let pdf = null;
-export const downloadPDF = (page, fileName = '工单') => {
+export const downloadPDF = (pages, splitPos, fileName = '工单') => {
   // direction : 方向
-  return new Promise((resolve, reject) => {
-    html2canvas(page, { scale: ratio }).then(function (canvas) {
-      var contentWidth = canvas.width;
-      var contentHeight = canvas.height;
 
-      //一页pdf显示html页面生成的canvas高度;
-      var pageHeight = (contentWidth / a4Width) * a4Height;
-      //未生成pdf的html页面高度
-      var leftHeight = contentHeight;
-      //页面偏移
-      var position = 10;
-      //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
-      var imgWidth = a4Width - margin * 2;
-      var imgHeight = (imgWidth / contentWidth) * contentHeight;
+  html2canvas(pages, { scale: ratio }).then((canvas) => {
+    let pdf = new jsPDF('', 'pt', 'a4');
 
-      console.log(imgHeight, 'imgHeight');
+    var imgWidth = a4Width - margin * 2;
 
-      var pageData = canvas.toDataURL('image/jpeg', 1.0);
+    //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
+    const ctx = canvas.getContext('2d');
+    splitPos.reduce((pre, pos) => {
+      const pageData = ctx.getImageData(
+        0,
+        pre * ratio,
+        canvas.width,
+        pos * ratio - pre * ratio
+      );
 
-      var pdf = new jsPDF('', 'pt', 'a4');
+      //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
+      var imgHeight = (imgWidth / canvas.width) * (pos * ratio - pre * ratio);
 
-      console.log(canvasSplit(canvas, imgWidth, a4Height - 20));
+      pdf.addImage(pageData, 'JPEG', margin, 10, imgWidth, imgHeight);
 
-      //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
-      //当内容未超过pdf一页显示的范围，无需分页
-      if (leftHeight < pageHeight) {
-        pdf.addImage(pageData, 'JPEG', margin, position, imgWidth, imgHeight);
-      } else {
-        while (leftHeight > 0) {
-          pdf.addImage(pageData, 'JPEG', margin, position, imgWidth, imgHeight);
-          console.log(leftHeight, pageHeight, position);
-          leftHeight -= pageHeight;
-          position -= pageHeight;
-          //避免添加空白页
-          if (leftHeight > 0) {
-            pdf.addPage();
-          }
-        }
+      if (pos < canvas.height) {
+        pdf.addPage();
       }
-
-      pdf.save(`${fileName}.pdf`);
-      const blob = pdf.output('blob');
-      var blob_url = URL.createObjectURL(blob);
-      window.open(blob_url);
-      pdf = null;
-      resolve();
-    });
+      return pos;
+    }, 0);
+
+    pdf.save(`${fileName}.pdf`);
+    const blob = pdf.output('blob');
+    var blob_url = URL.createObjectURL(blob);
+    window.open(blob_url);
+    pdf = null;
   });
 };
-
-function canvasSplit (canvas, width, height) {
-  const pageList = [];
-  const contentHeight = canvas.height;
-
-  let leftHeight = (width / canvas.width) * contentHeight;
-
-  console.log('leftHeight', leftHeight);
-  const can = document.createElement('canvas');
-
-  can.width = width;
-  can.height = height;
-
-  const ctx = can.getContext('2d');
-
-  const imgHeight = (canvas.width / width) * height;
-
-  while (leftHeight > 0) {
-    ctx.drawImage(canvas, 0, 0, canvas.width, imgHeight, 0, 0, width, height);
-    pageList.push(canvas.toDataURL('image/jpeg', 1.0));
-    ctx.clearRect(0, 0, 0, 0);
-    leftHeight -= imgHeight;
-
-    console.log('leftHeight', leftHeight, imgHeight);
-  }
-
-  return pageList;
-}