#

package-lock.json

@@ -15,7 +15,9 @@
         "element-ui": "^2.4.5",
         "exceljs": "^4.3.0",
         "file-saver": "^2.0.5",
+        "html2canvas": "^1.4.1",
         "js-cookie": "^3.0.5",
+        "jspdf": "^2.5.1",
         "jszip-utils": "^0.1.0",
         "less": "^4.1.3",
         "less-loader": "^11.1.0",
@@ -1785,7 +1787,6 @@
       "version": "7.21.0",
       "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.21.0.tgz",
       "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
-      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.13.11"
       },
@@ -1796,8 +1797,7 @@
     "node_modules/@babel/runtime/node_modules/regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
-      "dev": true
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
     "node_modules/@babel/template": {
       "version": "7.20.7",
@@ -2494,6 +2494,12 @@
       "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
       "dev": true
     },
+    "node_modules/@types/raf": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmmirror.com/@types/raf/-/raf-3.4.0.tgz",
+      "integrity": "sha512-taW5/WYqo36N7V39oYyHP9Ipfd5pNFvGTIQsNGj86xV88YQ7GnI30/yMfKDF7Zgin0m3e+ikX88FvImnK4RjGw==",
+      "optional": true
+    },
     "node_modules/@types/range-parser": {
       "version": "1.2.4",
       "resolved": "https://registry.npmmirror.com/@types/range-parser/-/range-parser-1.2.4.tgz",
@@ -3673,6 +3679,17 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "bin": {
+        "atob": "bin/atob.js"
+      },
+      "engines": {
+        "node": ">= 4.5.0"
+      }
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.13",
       "resolved": "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.13.tgz",
@@ -3829,6 +3846,14 @@
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmmirror.com/base64-js/-/base64-js-1.5.1.tgz",
@@ -4010,6 +4035,17 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
+      "bin": {
+        "btoa": "bin/btoa.js"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/buffer": {
       "version": "5.7.1",
       "resolved": "https://registry.npmmirror.com/buffer/-/buffer-5.7.1.tgz",
@@ -4111,6 +4147,31 @@
       "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001458.tgz",
       "integrity": "sha512-lQ1VlUUq5q9ro9X+5gOEyH7i3vm+AYVT1WDCVB69XOZ17KZRhnZ9J0Sqz7wTHQaLBJccNCHq8/Ww5LlOIZbB0w=="
     },
+    "node_modules/canvg": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmmirror.com/canvg/-/canvg-3.0.10.tgz",
+      "integrity": "sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/canvg/node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "optional": true
+    },
     "node_modules/case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
       "resolved": "https://registry.npmmirror.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
@@ -4669,6 +4730,14 @@
         "postcss": "^8.0.9"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/css-loader": {
       "version": "6.7.3",
       "resolved": "https://registry.npmmirror.com/css-loader/-/css-loader-6.7.3.tgz",
@@ -5272,6 +5341,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/dompurify": {
+      "version": "2.4.5",
+      "resolved": "https://registry.npmmirror.com/dompurify/-/dompurify-2.4.5.tgz",
+      "integrity": "sha512-jggCCd+8Iqp4Tsz0nIvpcb22InKEBrGz5dw3EQJMs8HPJDsKbFIO3STYtAvCfDx26Muevn1MHVI0XxjgFfmiSA==",
+      "optional": true
+    },
     "node_modules/domutils": {
       "version": "2.8.0",
       "resolved": "https://registry.npmmirror.com/domutils/-/domutils-2.8.0.tgz",
@@ -6265,6 +6340,11 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmmirror.com/fflate/-/fflate-0.4.8.tgz",
+      "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="
+    },
     "node_modules/figures": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/figures/-/figures-2.0.0.tgz",
@@ -6854,6 +6934,18 @@
         "webpack": "^5.20.0"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/htmlparser2": {
       "version": "6.1.0",
       "resolved": "https://registry.npmmirror.com/htmlparser2/-/htmlparser2-6.1.0.tgz",
@@ -7423,6 +7515,23 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jspdf": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/jspdf/-/jspdf-2.5.1.tgz",
+      "integrity": "sha512-hXObxz7ZqoyhxET78+XR34Xu2qFGrJJ2I2bE5w4SM8eFaFEkW2xcGRVUss360fYelwRSid/jT078kbNvmoW0QA==",
+      "dependencies": {
+        "@babel/runtime": "^7.14.0",
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "fflate": "^0.4.8"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.6",
+        "core-js": "^3.6.0",
+        "dompurify": "^2.2.0",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
     "node_modules/jszip": {
       "version": "3.10.1",
       "resolved": "https://registry.npmmirror.com/jszip/-/jszip-3.10.1.tgz",
@@ -8849,6 +8958,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "optional": true
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz",
@@ -9614,6 +9729,15 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmmirror.com/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "optional": true,
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/randombytes/-/randombytes-2.1.0.tgz",
@@ -9946,6 +10070,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmmirror.com/rimraf/-/rimraf-3.0.2.tgz",
@@ -10443,6 +10576,15 @@
       "deprecated": "Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility",
       "dev": true
     },
+    "node_modules/stackblur-canvas": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmmirror.com/stackblur-canvas/-/stackblur-canvas-2.6.0.tgz",
+      "integrity": "sha512-8S1aIA+UoF6erJYnglGPug6MaHYGo1Ot7h5fuXx4fUPvcvQfcdw2o/ppCse63+eZf8PPidSu4v1JnmEVtEDnpg==",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
     "node_modules/stackframe": {
       "version": "1.3.4",
       "resolved": "https://registry.npmmirror.com/stackframe/-/stackframe-1.3.4.tgz",
@@ -10566,6 +10708,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmmirror.com/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/svg-tags": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/svg-tags/-/svg-tags-1.0.0.tgz",
@@ -10684,6 +10835,14 @@
         "node": ">= 10.13.0"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/text-table/-/text-table-0.2.0.tgz",
@@ -11013,6 +11172,14 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmmirror.com/uuid/-/uuid-8.3.2.tgz",

package.json

@@ -15,7 +15,9 @@
     "element-ui": "^2.4.5",
     "exceljs": "^4.3.0",
     "file-saver": "^2.0.5",
+    "html2canvas": "^1.4.1",
     "js-cookie": "^3.0.5",
+    "jspdf": "^2.5.1",
     "jszip-utils": "^0.1.0",
     "less": "^4.1.3",
     "less-loader": "^11.1.0",

src/components/tool/pdf.js

@@ -0,0 +1,72 @@
+import html2canvas from "html2canvas";
+import jsPDF from "jspdf";
+
+export const downloadPDF = page => {
+console.log(444);
+
+  html2canvas(page).then(function(canvas) {
+    canvas2PDF(canvas);
+  });
+};
+const canvas2PDF = canvas => {
+    let contentWidth = canvas.width;
+    let contentHeight = canvas.height;
+      // 一页pdf显示html页面生成的canvas高度;
+    let pageHeight = contentWidth / 592.28 * 841.89 ;
+    // let pageHeight = 841.89;
+
+      // 未生成pdf的html页面高度
+    let leftHeight = contentHeight;
+      // 页面偏移
+    let position = 0;
+      // html页面生成的canvas在pdf中图片的宽高（本例为：横向a4纸[841.89,592.28]，纵向需调换尺寸）
+    let imgWidth = 592.28;
+    let imgHeight = 592.28 / contentWidth * contentHeight;
+    // let imgHeight = 841.89;
+
+    let pageData = canvas.toDataURL('image/jpeg', 1.0);
+    let PDF = new jsPDF('', 'pt', 'a4');
+    // 两个高度需要区分: 一个是html页面的实际高度，和生成pdf的页面高度
+    // 当内容未超过pdf一页显示的范围，无需分页
+    if (leftHeight < pageHeight) {
+      PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
+    } else {
+      while (leftHeight > 0) {
+        PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
+        leftHeight -= pageHeight;
+        position -= 841.89;
+        // 避免添加空白页
+        if (leftHeight > 0) {
+          PDF.addPage();
+        }
+      }
+    }
+    PDF.save('测试' + '.pdf')
+
+
+
+
+
+
+
+
+  // let contentWidth = canvas.width;
+  // let contentHeight = canvas.height;
+  // console.log(contentWidth,contentHeight);
+  // let imgHeight = contentHeight;
+  // let imgWidth = contentWidth/2;
+
+  // // 第一个参数： l：横向  p：纵向
+  // // 第二个参数：测量单位（"pt"，"mm", "cm", "m", "in" or "px"）
+  // let pdf = new jsPDF('l', 'pt', 'a4');
+
+  // pdf.addImage(
+  //   canvas.toDataURL("image/jpeg", 1.0),
+  //   "JPEG",
+  //   0,
+  //   0,
+  //   imgWidth,
+  //   imgHeight
+  // );
+  // pdf.save("导出.pdf");
+};

src/views/activityManage/components/markeractivityWord.vue

@@ -1,11 +1,12 @@
 <template>
     <div id="MarkeractivityWord">
-        <div id="title">
+       
+        <table border="1" cellspacing="0" class="table">
+          <div id="title">
             <div class="school">深圳技师学院</div>
             <div class="wordTitle">创客专项资金及项目申请表（创客活动）</div>
             <div class="date">申请日期：{{wordData.applicationDate}}</div>
         </div>
-        <table border="1" cellspacing="0" class="table">
             <tr id="one">
               <td colspan="4" class="bold"><span style="color:red">*</span>关联项目</td>
               <td colspan="12">
@@ -514,7 +515,8 @@
             display: flex;
             flex-direction: column;
             align-items: center;
-            position: relative;
+            position: absolute;
+            top: -140px;
             // margin-top: 40px;
             .school{
                 font-size: 2.5em;
@@ -537,7 +539,9 @@
         }
         .table{
             border: none;
-            border-top: solid 1px black;
+            border-top: solid 1px black;  
+            position: relative;
+            margin-top: 130px;
             .bold{
               font-weight: 600;
             }

src/views/projectApply/components/MakerSpaceWord.vue

@@ -1,11 +1,12 @@
 <template>
 <div id="MakerSpaceWord"  v-loading="loading">
-    <div id="title">
-        <div class="school">深圳技师学院</div>
-        <div class="wordTitle">二级学院特色创客空间建设项目立项申报书</div>
-        <div class="date">申请日期： {{ wordData['applicationDate'] }}</div>
-    </div>
+
     <div id="table">
+      <div id="title">
+            <div class="school">深圳技师学院</div>
+            <div class="wordTitle">二级学院特色创客空间建设项目立项申报书</div>
+            <div class="date">申请日期： {{ wordData['applicationDate'] }}</div>
+        </div>
         <div class="han" id="one">
           <div class="label"><span style="color:red">*</span>项目名称</div><div class="value">
             <el-input
@@ -542,13 +543,13 @@
             </div>
           </div>
         </div>
-
-      </div>
-      <div class="notes">
-        <span>备注：</span>
-        <span>1.表格可顺延或另附页。</span>
-        <span>2.项目申报需附相关佐证材料。</span>
+        <div class="notes">
+          <span>备注：</span>
+          <span>1.表格可顺延或另附页。</span>
+          <span>2.项目申报需附相关佐证材料。</span>
+        </div>
       </div>
+      
 </div>
 </template>
   
@@ -610,7 +611,9 @@
         display: flex;
         flex-direction: column;
         align-items: center;
-        position: relative;
+        top: -150px;
+        // position: relative;
+        position: absolute;
         // margin-top: 40px;
         .school{
             font-size: 2.5em;
@@ -638,6 +641,8 @@
     border-bottom: none;
     display: flex;
     flex-direction: column;
+    position: relative;
+    margin-top: 130px;
     .han{
       display: flex;
       height: auto;
@@ -947,6 +952,8 @@
   .notes{
     width: 100%;
     display: flex;
+    position: absolute;
+    bottom: -80px;
     flex-direction:column;
   }
   :deep(.el-input__inner){

src/views/projectApply/components/MakerSpaceWordShow.vue

@@ -1,11 +1,12 @@
 <template>
     <div id="MakerSpaceWord">
-        <div id="title">
-            <div class="school">深圳技师学院</div>
-            <div class="wordTitle">二级学院特色创客空间建设项目立项申报书</div>
-            <div class="date">申请日期： {{ wordData['applicationDate'] }}</div>
-        </div>
+        
         <div id="table">
+          <div id="title">
+              <div class="school">深圳技师学院</div>
+              <div class="wordTitle">二级学院特色创客空间建设项目立项申报书</div>
+              <div class="date">申请日期： {{ wordData['applicationDate'] }}</div>
+          </div>
             <div class="han" id="one">
               <div class="label">项目名称</div><div class="value" v-text="wordData['projectName']"></div>
               <div class="label">所在学院</div><div class="value" v-text="wordData['collegeName']"></div>
@@ -351,13 +352,13 @@
                 </div>
               </div>
             </div>
-    
-          </div>
-          <div class="notes">
-            <span>备注：</span>
-            <span>1.表格可顺延或另附页。</span>
-            <span>2.项目申报需附相关佐证材料。</span>
+            <div class="notes">
+              <span>备注：</span>
+              <span>1.表格可顺延或另附页。</span>
+              <span>2.项目申报需附相关佐证材料。</span>
+            </div>
           </div>
+          
           <!-- <el-button type="primary" @click="getWord">下载表格</el-button> -->
     </div>
     </template>
@@ -450,7 +451,8 @@
             display: flex;
             flex-direction: column;
             align-items: center;
-            position: relative;
+            position: absolute;
+            top: -140px;
             // margin-top: 40px;
             .school{
                 font-size: 2.5em;
@@ -477,6 +479,8 @@
         border: solid 1px black;
         border-bottom: none;
         display: flex;
+        margin-top: 130px;
+        position: relative;
         flex-direction: column;
         .han{
           display: flex;
@@ -780,6 +784,8 @@
         width: 100%;
         display: flex;
         flex-direction:column;
+        position: absolute;
+        bottom: -80px;
       }
       :deep(.el-input__inner){
         height: 100%;

src/views/projectApply/components/studentProjectWord.vue

@@ -1,12 +1,16 @@
 <template>
     <div id="studentProjectWord">
-        <div id="title">
-            <div class="school">深圳技师学院</div>
-            <div class="wordTitle">学 生 创 客 项 目 申 报 书</div>
-            <div class="date">申请日期：{{wordData.applicationDate}}</div>
-        </div>
-        <table border="1" cellspacing="0" class="table">
-    
+        
+        <table ref="pdf" border="1" cellspacing="0" class="table">
+          <tr style="border: none;">
+            <td colspan="7" style="border: none;">
+              <div id="title">
+                <div class="school">深圳技师学院</div>
+                <div class="wordTitle">学 生 创 客 项 目 申 报 书</div>
+                <div class="date">申请日期：{{wordData.applicationDate}}</div>
+            </div>
+            </td>
+          </tr>
           <tr id="projectName">
             <td colspan="2" ref="projectName" class="bold"><span style="color:red">*</span>项目名称</td><td colspan="5" >
               <el-input
@@ -365,7 +369,7 @@
             <td>支出类别</td><td colspan="2">支出项目</td><td>金额（元）</td><td colspan="4">备 注</td>
           </tr>
           <tr>
-            <td rowspan="5">直接费用</td>
+            <td rowspan="5" style="border-right: none;">直接费用</td>
           </tr>
           <tr>
             <td colspan="2">小型仪器设备费</td>
@@ -426,7 +430,7 @@
           </tr>
     
           <tr>
-            <td rowspan="5">间接费用</td>
+            <td rowspan="5" style="border-right: none;">间接费用</td>
           </tr>
           <tr>
             <td colspan="2">项目成果鉴定费</td><td>
@@ -502,17 +506,24 @@
                 <div style="text-align: right;font-size: 18px;width: 90%;">年&nbsp;&nbsp;&nbsp; 月 &nbsp;&nbsp;&nbsp;日</div>
             </td>
           </tr>
+          <!-- <tr style="border: none;"> -->
+            <!-- <td colspan="7"  style="border: none;"> -->
+              <div class="notes">
+                <span>备注：</span>
+                <span>1.表格可顺延或另附页。</span>
+                <span>2.优先支持项目需提供与研发项目相关的实证材料并查看原件。</span>
+                <span>3.初创组已结题项目申请需提供结题验收证明、初创企业申请需提供入驻学校孵化基地协议书及公司营业执照。</span>
+              </div>
+            <!-- </td> -->
+          <!-- </tr> -->
         </table>
-          <div class="notes">
-            <span>备注：</span>
-            <span>1.表格可顺延或另附页。</span>
-            <span>2.优先支持项目需提供与研发项目相关的实证材料并查看原件。</span>
-            <span>3.初创组已结题项目申请需提供结题验收证明、初创企业申请需提供入驻学校孵化基地协议书及公司营业执照。</span>
-          </div>
+         <button @click="downpdf">pdf</button>
     </div>
     </template>
       
     <script>
+  import {downloadPDF} from '@/components/tool/pdf'
+
       export default {
         props:["wordData",'reversedMessage'],
         data() {
@@ -521,6 +532,9 @@
             }
         },
         methods: {
+          downpdf(){
+              downloadPDF(this.$refs.pdf)
+          },
           getText(value) {     //电话验证
               let verify = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/; //获取正则表达式 存放到verify变量中
               let result = verify.test(value.trim()); //判断输入框内容是否符合 正则表达式
@@ -568,36 +582,13 @@
         margin: 0;
         padding:40px 100px;
         box-sizing:border-box;
-        #title{
-            width: 100%;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            position: relative;
-            // margin-top: 40px;
-            .school{
-                font-size: 2.5em;
-                font-weight: bold;
-                letter-spacing: 20px;
-            }
-            .wordTitle{
-                font-size: 2em;
-                letter-spacing: .15em;
-                margin-bottom:40px ;
-            }
-            .date{
-    
-                font-size: 1em;
-                position: absolute;
-                bottom: 0;
-                right: 100px;
-                font-weight: bold;
-            }
-        }
+        
         .table{
             border: none;
-            border-top: solid 1px black;
-            border-right:  solid 1px black;
+            border-bottom: solid 1px black;
+            // border-right:  solid 1px black;
+            // margin-bottom: 30px;
+            position: relative;
             .textLeft{
               :deep(.el-textarea__inner){
                 border: none ;
@@ -609,14 +600,45 @@
             .bold{
               font-weight: 600;
             }
+            #title{
+              // width: 100%;
+              line-height: 40px;
+              height: 150px;
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              position: relative;
+              // margin-top: 40px;
+              .school{
+                  font-size: 2.5em;
+                  font-weight: bold;
+                  letter-spacing: 20px;
+              }
+              .wordTitle{
+                  font-size: 2em;
+                  letter-spacing: .15em;
+                  margin-bottom:40px ;
+              }
+              .date{
+                  font-size: 1em;
+                  position: absolute;
+                  bottom: 0;
+                  right: 100px;
+                  font-weight: bold;
+              }
+          }
             tr td{
               border: none;
-              border-bottom: solid 1px black;
+              border-top: solid 1px black;
               border-left: solid 1px black;
+             
               height: 50px;
               text-align: center;
               line-height: 30px;
               width: 14.3%;
+              &:last-of-type{
+                border-right:  solid 1px black;
+              }
               p{
                 font-weight: 600;
               }
@@ -647,14 +669,21 @@
                   -moz-appearance: textfield;
               }
             }
-            
-        }
-        .notes{
-          width: 100%;
-          display: flex;
-          flex-direction:column;
+
+            .notes{
+              width: 100%;
+              display: flex;
+              flex-direction:column;
+              position: absolute;
+              left: 0;
+              bottom: -100px;
+              // justify-content: flex-start;
+              text-align: left;
+              // margin-bottom: 30px;
+            }
         }
         
+        
     }
        
     .operate{

src/views/projectApply/components/studentProjectWordDetail.vue

@@ -1,7 +1,7 @@
 <template>
     <div id="studentProjectWordDetail">
         <studentProjectWord v-if="isupload==0" :wordData="wordData" :reversedMessage="reversedMessage"/>
-        <studentProjectWordShow v-if="isupload!=0" :downWordData="downWordData" :reversedMessage="reversedMessage"/>
+        <studentProjectWordShow ref="myChild" v-if="isupload!=0" :downWordData="downWordData" :reversedMessage="reversedMessage"/>
           <div style="width: 300px;margin: 20px auto;display: flex;justify-content: space-between;">
               <el-button style="width: 120px;margin: 20px auto;" @click="downloadDig=true" type="primary">下载文档</el-button>
               <el-button style="width: 120px;margin: 20px auto;" @click="test" type="primary" v-if="isupload==0">立即修改</el-button>
@@ -21,7 +21,7 @@
                 </el-dialog>
             <!-- 立即修改结束-->
 
-            <!-- 立即修改开始 -->
+            <!-- 下载文档开始 -->
             <el-dialog
                 title="下载文档"
                 :visible.sync="downloadDig"
@@ -34,7 +34,7 @@
                     <el-button @click="downloadDig=false" class="AllDialogBtn" >取消</el-button>
                 </span>
             </el-dialog>
-            <!-- 立即修改结束-->
+            <!-- 下载文档结束-->
     </div>
     </template>
       
@@ -43,6 +43,8 @@
     import { getWord } from '@/components/tool/getWord';
     import studentProjectWord from './studentProjectWord.vue';
     import studentProjectWordShow from './studentProjectWordShow.vue';
+    import {downloadPDF} from '@/components/tool/pdf'
+
       export default {
         components:{studentProjectWord,studentProjectWordShow},
         data() {
@@ -392,6 +394,8 @@
                 })
           },
           downloadWord(){
+            // console.log(this.document.studentProjectWord);
+            return downloadPDF(this.$refs.myChild.$refs.pdfShow)
             // this.wordData['total']=this.wordData.fund.facility*1 + this.wordData.fund.materials*1+this.wordData.fund.process*1+ this.wordData.fund.assist*1+this.wordData.fund.authenticate*1+ this.wordData.fund.match*1+this.wordData.fund.activity*1+this.wordData.fund.affair*1
             // return console.log(this.wordData);
             getWord(this.downWordData)

src/views/projectApply/components/studentProjectWordShow.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="studentProjectWord">
+    <div ref="pdfShow" id="studentProjectWord">
         <div id="title">
             <div class="school">深圳技师学院</div>
             <div class="wordTitle">学 生 创 客 项 目 申 报 书</div>
@@ -251,10 +251,14 @@
             <span>2.优先支持项目需提供与研发项目相关的实证材料并查看原件。</span>
             <span>3.初创组已结题项目申请需提供结题验收证明、初创企业申请需提供入驻学校孵化基地协议书及公司营业执照。</span>
           </div>
+         <!-- <button @click="downpdf">pdf</button> -->
+
     </div>
     </template>
       
     <script>
+  // import {downloadPDF} from '@/components/tool/pdf'
+
       export default {
         props:['reversedMessage','downWordData'],
         data() {
@@ -263,7 +267,9 @@
             }
         },
         methods: {
-
+          // downpdf(){
+          //     downloadPDF(this.$refs.pdf)
+          // },
         },
         computed:{   //经费总合
 

src/views/projectApply/newStudentProjectApply.vue

@@ -7,7 +7,7 @@
       <hr>
     
          <!-- 学生项目立项 -->
-        <studentProjectWord :wordData="wordData" :reversedMessage="reversedMessage"/>   
+        <studentProjectWord ref="pdf" :wordData="wordData" :reversedMessage="reversedMessage"/>   
 
         <div style="position: fixed;bottom: 5%;right: 2%;">
             <el-button  @click="test" type="primary">提交项目</el-button>
@@ -104,6 +104,8 @@
     },
     methods:{
       test(){    //验证
+
+
         const cEmpty = /^\s*$/g;
         for (let i in this.wordData){
           // console.log(this.wordData[i],i);