实现pdf存根功能

ruoyi-ui/package.json

@@ -55,11 +55,11 @@
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
+    "jspdf": "^2.5.1",
     "less-loader": "^5.0.0",
     "luckyexcel": "^1.0.1",
     "moment": "^2.29.4",
     "nprogress": "0.2.0",
-    "print-js": "^1.6.0",
     "qrcodejs2": "0.0.2",
     "quill": "1.3.7",
     "screenfull": "5.0.2",

ruoyi-ui/src/views/smartSchool/openRecruitment/examManage/components/InfoReview.vue

@@ -224,7 +224,7 @@
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button @click="cancel">取 消</el-button>
-        <el-button v-if="form.auditStatus === '1'" type="warning" @click="print">打印</el-button>
+        <el-button v-if="form.auditStatus === '1'" type="warning" @click="print(form)">生成PDF</el-button>
         <el-button v-if="!isHandle" type="primary" @click="submitForm">提 交</el-button>
       </span>
     </el-dialog>
@@ -314,7 +314,7 @@
 </template>
 
 <script>
-import printJS from 'print-js'
+import JSPDF from 'jspdf'
 import * as htmlToImage from 'html-to-image'
 import {
   addRelation,
@@ -456,17 +456,28 @@ export default {
     };
   },
   methods: {
-    print() {
+    print(form) {
       htmlToImage.toPng(this.$refs.printDom, {
-        pixelRatio: 5
+        pixelRatio: 2
       }).then((dataUrl) => {
-        printJS({
-          type: 'image',
-          printable: [dataUrl],
-          documentTitle: '报名审核存根'
+        this.getBase64ImageSize(dataUrl, (size) => {
+          const pdf = new JSPDF('p', 'mm', 'a4')
+          const ratio = 210 / size.width * size.height
+          pdf.addImage(dataUrl, 'png', 1, 1, 210, ratio)
+          pdf.save(`${form.project}-${form.studentName}.pdf`)
         })
       })
     },
+    getBase64ImageSize(base64, callback) {
+      let img = new Image();
+      img.onload = function() {
+        callback({ width: img.width, height: img.height });
+      };
+      img.onerror = function() {
+        callback(null);
+      };
+      img.src = base64;
+    },
     /** 查询【请填写功能名称】列表 */
     getList() {
       this.loading = true;