增加前端pdf导出

2025-12-08 10:26:43 +08:00 · 2022-10-18 19:58:35 +08:00
parent 3c0e745766
commit 2fa274d0bc
3 changed files with 131 additions and 10 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -1120,7 +1120,6 @@
      "version": "7.18.3",
      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.18.3.tgz",
      "integrity": "sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==",
-      "dev": true,
      "requires": {
        "regenerator-runtime": "^0.13.4"
      }
@@ -1506,6 +1505,12 @@
      "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
      "dev": true
    },
+    "@types/raf": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.0.tgz",
+      "integrity": "sha512-taW5/WYqo36N7V39oYyHP9Ipfd5pNFvGTIQsNGj86xV88YQ7GnI30/yMfKDF7Zgin0m3e+ikX88FvImnK4RjGw==",
+      "optional": true
+    },
    "@types/range-parser": {
      "version": "1.2.4",
      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
@@ -2673,6 +2678,11 @@
        }
      }
    },
+    "base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ=="
+    },
    "base64-js": {
      "version": "1.5.1",
      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -2964,6 +2974,11 @@
        }
      }
    },
+    "btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g=="
+    },
    "buffer": {
      "version": "4.9.2",
      "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
@@ -3170,6 +3185,22 @@
      "integrity": "sha512-0ZFjnlCaXNOAYcV7i+TtdKBp0L/3XEU2MF/x6Du1lrh+SRX4IfzIVL4HNJg5pB2PmFb8rszIGyOvsZnqqRoc2g==",
      "dev": true
    },
+    "canvg": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.10.tgz",
+      "integrity": "sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==",
+      "optional": true,
+      "requires": {
+        "@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"
+      }
+    },
    "case-sensitive-paths-webpack-plugin": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
@@ -4035,6 +4066,14 @@
        "timsort": "^0.3.0"
      }
    },
+    "css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
    "css-loader": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.6.0.tgz",
@@ -4618,6 +4657,12 @@
        "domelementtype": "^2.2.0"
      }
    },
+    "dompurify": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.0.tgz",
+      "integrity": "sha512-Be9tbQMZds4a3C6xTmz68NlMfeONA//4dOavl/1rNw50E+/QO0KVpbcU0PcaW0nsQxurXls9ZocqFxk8R2mWEA==",
+      "optional": true
+    },
    "domready": {
      "version": "1.0.8",
      "resolved": "https://registry.npmmirror.com/domready/-/domready-1.0.8.tgz",
@@ -5580,6 +5625,11 @@
        "websocket-driver": ">=0.5.1"
      }
    },
+    "fflate": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
+      "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="
+    },
    "figgy-pudding": {
      "version": "3.5.2",
      "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
@@ -6434,6 +6484,15 @@
        }
      }
    },
+    "html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "requires": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      }
+    },
    "htmlparser2": {
      "version": "6.1.0",
      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
@@ -7302,6 +7361,21 @@
        "graceful-fs": "^4.1.6"
      }
    },
+    "jspdf": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.5.1.tgz",
+      "integrity": "sha512-hXObxz7ZqoyhxET78+XR34Xu2qFGrJJ2I2bE5w4SM8eFaFEkW2xcGRVUss360fYelwRSid/jT078kbNvmoW0QA==",
+      "requires": {
+        "@babel/runtime": "^7.14.0",
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "canvg": "^3.0.6",
+        "core-js": "^3.6.0",
+        "dompurify": "^2.2.0",
+        "fflate": "^0.4.8",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
    "jsprim": {
      "version": "1.4.2",
      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
@@ -8806,8 +8880,7 @@
    "performance-now": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
-      "dev": true
+      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
    },
    "picocolors": {
      "version": "0.2.1",
@@ -9873,6 +9946,15 @@
        "raw-loader": "^0.5.1"
      }
    },
+    "raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "optional": true,
+      "requires": {
+        "performance-now": "^2.1.0"
+      }
+    },
    "randombytes": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -9989,8 +10071,7 @@
    "regenerator-runtime": {
      "version": "0.13.9",
      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
-      "dev": true
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
    },
    "regenerator-transform": {
      "version": "0.15.0",
@@ -10253,6 +10334,12 @@
      "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=",
      "dev": true
    },
+    "rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "optional": true
+    },
    "rimraf": {
      "version": "2.7.1",
      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
@@ -11123,6 +11210,12 @@
      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
      "dev": true
    },
+    "stackblur-canvas": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.5.0.tgz",
+      "integrity": "sha512-EeNzTVfj+1In7aSLPKDD03F/ly4RxEuF/EX0YcOG0cKoPXs+SLZxDawQbexQDBzwROs4VKLWTOaZQlZkGBFEIQ==",
+      "optional": true
+    },
    "stackframe": {
      "version": "1.2.1",
      "resolved": "https://registry.npmmirror.com/stackframe/-/stackframe-1.2.1.tgz",
@@ -11536,6 +11629,12 @@
        }
      }
    },
+    "svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "optional": true
+    },
    "svg-sprite-loader": {
      "version": "6.0.11",
      "resolved": "https://registry.npmmirror.com/svg-sprite-loader/-/svg-sprite-loader-6.0.11.tgz",
@@ -11852,6 +11951,14 @@
        }
      }
    },
+    "text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
    "text-table": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -12425,6 +12532,14 @@
      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
      "dev": true
    },
+    "utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "requires": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
    "uuid": {
      "version": "3.4.0",
      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
--- a/package.json
+++ b/package.json
@@ -23,8 +23,10 @@
    "element-ui": "^2.15.7",
    "file-saver": "^2.0.5",
    "fuse.js": "^6.4.6",
+    "html2canvas": "^1.4.1",
    "image-conversion": "^2.1.1",
    "jsencrypt": "^3.2.1",
+    "jspdf": "^2.5.1",
    "mockjs": "^1.1.0",
    "moment": "^2.29.1",
    "nprogress": "^0.2.0",
--- a/src/views/user/Mynotes.vue
+++ b/src/views/user/Mynotes.vue
@@ -128,10 +128,10 @@
        class="export-dialog"
        :close-on-click-modal="false"
        :visible.sync="dialogVisible">
-        <div class="Exportbox">
+        <div class="Exportbox" id="idPdfDom">
            <div class="export-dialog-top">
                <div class="export-dialog-left">
-                    <author-img :avatar="userData.avatar" :aid="userData.aid" :sex="userData.sex"></author-img>
+                   <!-- <author-img :avatar="userData.avatar" :aid="userData.aid" :sex="userData.sex"></author-img> -->
                    <div class="userInfo-info">
                        <p><span style="font-weight: 500;font-size: 22px;">{{userData.name}}</span><span style="font-size: 12px;margin-left:10px">{{userInfo.departFullName}}</span></p>
                        <p>{{userData.sign}}</p>
@@ -154,13 +154,13 @@
                    <span v-if="item.contentType != 3">{{ item.content }}</span>
                    <div v-else>
                        <template v-for="img in item.imgList">
-                            <img style="max-height:145px;max-width:140px"  :src="fileBaseUrl + img" alt=""/>
+                            <img style="max-height:145px;max-width:140px" crossOrigin="anonymous" :src="fileBaseUrl + img" alt=""/>
                        </template>
                    </div>
                </div>
                </div>
            </div>
-           </div>
+        </div>
        <span slot="footer" class="dialog-footer">
            <el-button class="footer-btn" style="color: #387DF7;" plain @click="dialogVisible = false">取 消</el-button>
            <!-- <el-button @click="dialogVisible = false">打 印</el-button> -->
@@ -179,6 +179,7 @@ import AuthorImg from '@/components/Portal/authorImg.vue';
 import { mapGetters } from 'vuex';
 import {formatDate} from '@/utils/tools.js';
 import apiUser from "@/api/system/user.js";
+import htmlToPdf from '@/utils/htmlToPdf'
 export default {
    components:{interactBar,FileUpload,AuthorImg},
    computed: {
@@ -303,7 +304,10 @@ export default {
            author:this.userData.avatar,//this.userInfo.avatar,
        }
        if(this.exportType == '1') {
-          apiNote.exportPdf(data);
+          window.scrollTo(0, 0);
+          htmlToPdf.getPdf('我的笔记');
+
+          //apiNote.exportPdf(data);
            // apiNote.exportPdf(data).then(res=>{
            //     if(res.status) {
            //        this.$message.error('导出失败');