制作提单的时候生成pdf

package.json

@@ -42,6 +42,7 @@
   "dependencies": {
     "@babel/parser": "^7.7.4",
     "@riophae/vue-treeselect": "0.4.0",
+    "@vue/runtime-dom": "latest",
     "axios": "0.24.0",
     "bpmn-js-token-simulation": "^0.10.0",
     "clipboard": "2.0.8",
@@ -58,6 +59,7 @@
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
+    "jspdf": "^2.5.1",
     "min-dash": "^3.5.2",
     "nprogress": "0.2.0",
     "number-precision": "^1.5.2",
@@ -77,8 +79,7 @@
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0",
     "xlsx": "^0.18.5",
-    "xml-js": "^1.6.11",
-    "@vue/runtime-dom": "latest"
+    "xml-js": "^1.6.11"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.6",

src/App.vue

@@ -81,4 +81,9 @@ $sizes: 0, 10,20,30,50,100,150,200,300,500,800,1000;
     width: #{$item}px !important;
   }
 }
+
+table{
+  border-collapse: collapse;
+  border-spacing: 0;
+}
 </style>

src/views/ecw/box/ladingBill/index.vue

@@ -204,7 +204,7 @@ export default {
       }
       this.currRow = row;
       this.$set(this.dialogCfg, "type", type);
-      this.$set(this.dialogCfg, "width", "1000px");
+      this.$set(this.dialogCfg, "width", "1200px");
       this.$set(this.dialogCfg, "visible", true);
     },
     makeBill(row) {

src/views/ecw/box/ladingBill/makeLadingBill.vue

@@ -19,11 +19,16 @@
         <el-button plain type="primary" @click="showLoaingTemplate">{{$t('提单预览')}}</el-button>
       </div>
       <div v-if="currRow.status !== 1">
-        <el-button type="primary" @click="submit">{{$t('提交审核')}}</el-button>
+        <el-button type="primary" @click="createPdf">{{$t('提交审核')}}</el-button>
         <el-button type="primary" @click="showLoaingTemplate">{{$t('提单预览')}}</el-button>
       </div>
     </el-row>
 
+    <!-- htm2canvas 容器 -->
+    <div style="height:0; overflow: hidden;">
+      <div id="html2canvas-container" v-html="billContent"></div>
+    </div>
+
     <el-dialog :title="dialogCfg.title" :visible.sync="visible" width="1000px" append-to-body class="shippingSea-dialog">
       <previewBill v-if="visible" :contentHtml="billContent" :currRow="currRow" :type="dialogCfg.type" />
     </el-dialog>
@@ -41,7 +46,9 @@ import {
 import { serviceMsg, toReviewDetail } from "../shippingSea/utils";
 import previewBill from "./previewBill.vue";
 import { getToken } from "@/utils/auth";
-
+import html2canvas from 'html2canvas';
+import { jsPDF } from "jspdf";
+import {uploadFile} from '@/api/infra/file'
 export default {
   name: "makeLadingBill",
   components: {
@@ -165,8 +172,34 @@ export default {
     showLoaingTemplate() {
       this.visible = true;
     },
-    submit() {
+    createPdf(){
+      let loading = this.$loading()
+      html2canvas(document.querySelector("#html2canvas-container"), {dpi:144}).then(canvas => {
+        const doc = new jsPDF('p','pt','a4',true);
+
+        const imgWidth = canvas.width
+        const imgHeight = canvas.height
+        let _w = 595.28;
+		    let _h = 595.28/imgWidth*imgHeight;
+        if(_h>841.89){
+          _h = 841.89;
+          _w = _h/imgHeight*imgWidth
+        }
+        const _left = (595.28-_w)/2;
+        doc.addImage(canvas, 'PNG', _left, 0, _w,_h, '', 'FAST');
+        // doc.save("a4.pdf");
+        let form = new FormData()
+        form.append('file', new File([doc.output('arraybuffer')], Date.now() + '.pdf', {type: 'application/pdf'}))
+        return uploadFile(form)
+      }).then(res => {
+        return this.submit(res.data)
+      }).finally(res => {
+        loading.close()
+      })
+    },
+    submit(imgUrl) {
       let params = {
+        imgUrl,
         billContent: this.billContent,
         orderId: this.currRow.orderId,
         copyUserId: this.selectedUsers,
@@ -219,6 +252,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+::v-deep #html2canvas-container{
+  p{
+    margin: 0;
+  }
+}
 .shipping-makeLadingBill {
   .title-orderNo {
     text-align: center;

src/views/ecw/warehouse/tpl.js

 const sea = `
-<table style="width:96%;">
+<table style="width:100%;">
     
 	
     <tbody>
@@ -59,7 +59,7 @@ const sea = `
 	
     </tbody>
 </table>
-<table style="width:96%;">
+<table style="width:100%;">
     
 	
     <tbody>
@@ -96,7 +96,7 @@ const sea = `
 `
 
 const air= `
-<table style="width:96%;">
+<table style="width:100%;">
     <tbody>
         <tr class="firstRow">
             <td style="text-align:center;">
@@ -146,7 +146,7 @@ const air= `
         </tr>
     </tbody>
 </table>
-<table style="width:96%;">
+<table style="width:100%;">
     <tbody>
         <tr class="firstRow">
             <td style="font-size:16px;color:#008fd7;font-family:&#39;Times New Roman&#39;;text-align:center;">