From 33faab50323e2208dc23859d2c74b87c26ee18fa Mon Sep 17 00:00:00 2001
From: Maoqiang Zheng <soymikey@163.com>
Date: Thu, 13 Sep 2018 14:35:36 +0800
Subject: [PATCH] fix pdf bug

---
 package-lock.json        | 59 ++++++++++++++++++++++++++++++++--------
 package.json             |  2 ++
 src/components/pdf.vue   | 45 +++++++++++++++---------------
 src/components/table.vue | 19 ++++++++-----
 4 files changed, 85 insertions(+), 40 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ecb9d4f..704a976 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -805,12 +805,30 @@
         "commander": "*"
       }
     },
+    "@types/html2canvas": {
+      "version": "0.0.33",
+      "resolved": "http://r.cnpmjs.org/@types/html2canvas/download/@types/html2canvas-0.0.33.tgz",
+      "integrity": "sha1-5AdvDqZk081uFGDILkixd3dAUv4=",
+      "requires": {
+        "@types/jquery": "*"
+      }
+    },
     "@types/jest": {
       "version": "23.3.2",
       "resolved": "http://r.cnpmjs.org/@types/jest/download/@types/jest-23.3.2.tgz",
       "integrity": "sha1-B7kPat911Cw0IwwCaiUp5Wwknbs=",
       "dev": true
     },
+    "@types/jquery": {
+      "version": "3.3.6",
+      "resolved": "http://r.cnpmjs.org/@types/jquery/download/@types/jquery-3.3.6.tgz",
+      "integrity": "sha1-WTLq2SYwfKIeWzaAglf3ySawZWU="
+    },
+    "@types/jspdf": {
+      "version": "1.1.31",
+      "resolved": "http://r.cnpmjs.org/@types/jspdf/download/@types/jspdf-1.1.31.tgz",
+      "integrity": "sha1-iN6AGP/rjyZPl1dPKxxVuMVAUyY="
+    },
     "@types/node": {
       "version": "10.9.4",
       "resolved": "http://r.cnpmjs.org/@types/node/download/@types/node-10.9.4.tgz",
@@ -5708,7 +5726,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5729,12 +5748,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5749,17 +5770,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5876,7 +5900,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5888,6 +5913,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5902,6 +5928,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -5909,12 +5936,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -5933,6 +5962,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -6013,7 +6043,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -6025,6 +6056,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -6110,7 +6142,8 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -6146,6 +6179,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -6165,6 +6199,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -6208,12 +6243,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
diff --git a/package.json b/package.json
index db571e3..1da66cd 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,8 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
+    "@types/html2canvas": "0.0.33",
+    "@types/jspdf": "^1.1.31",
     "abab": "^2.0.0",
     "html2canvas": "^1.0.0-alpha.12",
     "jspdf": "^1.4.1",
diff --git a/src/components/pdf.vue b/src/components/pdf.vue
index 64ae06a..6570ef1 100644
--- a/src/components/pdf.vue
+++ b/src/components/pdf.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class='pdf'>
-        <button @click="createPdf">print PDF</button>
-        <button @click="createExcel">print EXCEL</button>
-    </div>
+  <div class='pdf'>
+    <button @click="createPdf">print PDF</button>
+    <button @click="createExcel">print EXCEL</button>
+  </div>
 
 </template>
 <script lang="ts">
@@ -12,39 +12,40 @@ import html2canvas from 'html2canvas';
 export default Vue.extend({
   data() {
     return {
-      canvasUrl: '',
+      canvasUrl: '' as string,
     };
   },
   methods: {
     createPdf() {
-      html2canvas(document.getElementById('order-details')).then(
-        (canvas: any) => {
-          canvas.setAttribute('id', 'canvas');
-          document.body.appendChild(canvas);
-          const canvasElement: any = document.getElementById('canvas');
-          this.canvasUrl = canvasElement.toDataURL();
-          const doc = new jsPDF({
-            unit: 'cm',
-          });
-          const height = canvasElement.height / window.outerHeight;
-          doc.addImage(this.canvasUrl, 0.5, 0.5, 20, 29 * height);
-          doc.save('test' + '.pdf');
-        },
-      );
+      const elements: any = document.getElementById('order-details');
+      html2canvas(elements, {
+        scale: 2,
+      }).then((canvas: any) => {
+        canvas.setAttribute('id', 'canvas');
+        document.body.appendChild(canvas);
+        const canvasElement: any = document.getElementById('canvas');
+        this.canvasUrl = canvasElement.toDataURL();
+        const doc = new jsPDF({
+          unit: 'cm',
+        });
+        const canvasHeight = canvasElement.style.height.replace('px', '');
+        const height = canvasHeight / window.outerHeight;
+        doc.addImage(this.canvasUrl, 'JPEG', 0.5, 0.5, 20, 29 * height);
+        doc.save('test' + '.pdf');
+      });
+      const canvasElementToRemove: any = document.getElementById('canvas');
+      canvasElementToRemove.remove();
     },
     createExcel() {
       const tabs = document.getElementsByTagName('table');
       let allElementText: any;
       for (const tab of tabs) {
         let tabText: string = '<table border="2px"><tr>';
-
         for (const row of tab.rows) {
           tabText += row.innerHTML + '</tr>';
         }
-
         allElementText += tabText + '</table>';
       }
-
       window.open(
         'data:application/vnd.ms-excel,' + encodeURIComponent(allElementText),
       );
diff --git a/src/components/table.vue b/src/components/table.vue
index 951b454..acf7792 100644
--- a/src/components/table.vue
+++ b/src/components/table.vue
@@ -44,14 +44,15 @@
           <td colspan="2">{{orderDetails.addOn}}</td>
         </tr>
 
-        <tr class='table-header-one'>
-          <th colspan="3">材料:{{board.matierial}}</th>
-          <th colspan="7">颜色:{{board.color}}</th>
-          <th colspan="4">共{{board.boardInfos.length}}条记录</th>
-        </tr>
-        <th v-for="(header,index) in tableTitle" :key="index">{{header}}</th>
-
         <tbody>
+
+          <tr class='table-header-one'>
+            <th colspan="3">材料:{{board.matierial}}</th>
+            <th colspan="7">颜色:{{board.color}}</th>
+            <th colspan="4">共{{board.boardInfos.length}}条记录</th>
+          </tr>
+          <th v-for="(header,index) in tableTitle" :key="index+header">{{header}}</th>
+
           <tr v-for="(info,index) in board.boardInfos" :key="index">
             <td v-for="(each,index) in info " :key="index">{{each}}</td>
           </tr>
@@ -191,6 +192,10 @@ table {
     border: 0px;
   }
 }
+td {
+  width: 7.1%;
+  text-align: center;
+}
 </style>