UPDATE

package-lock.json

@@ -26,7 +26,8 @@
         "vue-router": "^3.0.1",
         "vue-video-player": "^5.0.2",
         "vuex": "^3.6.2",
-        "wangeditor": "^4.7.15"
+        "wangeditor": "^4.7.15",
+        "worker-loader": "^2.0.0"
       },
       "devDependencies": {
         "autoprefixer": "^7.1.2",
@@ -1996,9 +1997,9 @@
       "dev": true
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001265",
-      "resolved": "https://registry.npmmirror.com/caniuse-lite/download/caniuse-lite-1.0.30001265.tgz?cache=0&sync_timestamp=1633496161326&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fcaniuse-lite%2Fdownload%2Fcaniuse-lite-1.0.30001265.tgz",
-      "integrity": "sha1-BhPJ5ski5CJ5Lm/O/fmjr+7k+MM=",
+      "version": "1.0.30001412",
+      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001412.tgz",
+      "integrity": "sha512-+TeEIee1gS5bYOiuf+PS/kp2mrXic37Hl66VY6EAfxasIk5fELTktK2oOezYed12H8w7jt3s512PpulQidPjwA==",
       "dev": true
     },
     "node_modules/caseless": {
@@ -4276,9 +4277,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.3.866",
-      "resolved": "https://registry.npmmirror.com/electron-to-chromium/download/electron-to-chromium-1.3.866.tgz",
-      "integrity": "sha1-1EYzj1rWlIsnpQc5dg57C1zFAy8=",
+      "version": "1.4.262",
+      "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.262.tgz",
+      "integrity": "sha512-Ckn5haqmGh/xS8IbcgK3dnwAVnhDyo/WQnklWn6yaMucYTq7NNxwlGE8ElzEOnonzRLzUCo2Ot3vUb2GYUF2Hw==",
       "dev": true
     },
     "node_modules/element-ui": {
@@ -5499,9 +5500,9 @@
       }
     },
     "node_modules/graceful-fs": {
-      "version": "4.2.8",
-      "resolved": "https://registry.nlark.com/graceful-fs/download/graceful-fs-4.2.8.tgz?cache=0&sync_timestamp=1628194078324&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fgraceful-fs%2Fdownload%2Fgraceful-fs-4.2.8.tgz",
-      "integrity": "sha1-5BK40z9eAGWTy9PO5t+fLOu+gCo="
+      "version": "4.2.10",
+      "resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.10.tgz",
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
     },
     "node_modules/graceful-readlink": {
       "version": "1.0.1",
@@ -17452,9 +17453,9 @@
       "dev": true
     },
     "caniuse-lite": {
-      "version": "1.0.30001265",
-      "resolved": "https://registry.npmmirror.com/caniuse-lite/download/caniuse-lite-1.0.30001265.tgz?cache=0&sync_timestamp=1633496161326&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fcaniuse-lite%2Fdownload%2Fcaniuse-lite-1.0.30001265.tgz",
-      "integrity": "sha1-BhPJ5ski5CJ5Lm/O/fmjr+7k+MM=",
+      "version": "1.0.30001412",
+      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001412.tgz",
+      "integrity": "sha512-+TeEIee1gS5bYOiuf+PS/kp2mrXic37Hl66VY6EAfxasIk5fELTktK2oOezYed12H8w7jt3s512PpulQidPjwA==",
       "dev": true
     },
     "caseless": {
@@ -19399,9 +19400,9 @@
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.3.866",
-      "resolved": "https://registry.npmmirror.com/electron-to-chromium/download/electron-to-chromium-1.3.866.tgz",
-      "integrity": "sha1-1EYzj1rWlIsnpQc5dg57C1zFAy8=",
+      "version": "1.4.262",
+      "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.262.tgz",
+      "integrity": "sha512-Ckn5haqmGh/xS8IbcgK3dnwAVnhDyo/WQnklWn6yaMucYTq7NNxwlGE8ElzEOnonzRLzUCo2Ot3vUb2GYUF2Hw==",
       "dev": true
     },
     "element-ui": {
@@ -20410,9 +20411,9 @@
       }
     },
     "graceful-fs": {
-      "version": "4.2.8",
-      "resolved": "https://registry.nlark.com/graceful-fs/download/graceful-fs-4.2.8.tgz?cache=0&sync_timestamp=1628194078324&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fgraceful-fs%2Fdownload%2Fgraceful-fs-4.2.8.tgz",
-      "integrity": "sha1-5BK40z9eAGWTy9PO5t+fLOu+gCo="
+      "version": "4.2.10",
+      "resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.10.tgz",
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
     },
     "graceful-readlink": {
       "version": "1.0.1",

package.json

@@ -30,7 +30,8 @@
     "vue-router": "^3.0.1",
     "vue-video-player": "^5.0.2",
     "vuex": "^3.6.2",
-    "wangeditor": "^4.7.15"
+    "wangeditor": "^4.7.15",
+    "worker-loader": "^2.0.0"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

src/components/components/pdf3.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="pdf">
-    <div class="show">
+    <div class="show" v-if="numPages">
       <div v-for="i in numPages" :key="i" class="p-pdf">
-        <pdf :src="pdfUrl" :page="i" class="pdfbox"></pdf>
+        <pdf :src="src" :page="i" class="pdfbox"></pdf>
         <!-- <span>{{i}}</span> -->
         <!-- <div class="line"></div> -->
       </div>
@@ -12,6 +12,7 @@
 
 <script>
 import pdf from "vue-pdf";
+// import pdf from "pdfvuer";
 export default {
   name: "vue_pdf_preview",
   props: {
@@ -35,7 +36,8 @@ export default {
         background: "rgba(255, 255, 255, 0.7)",
         target: document.querySelector(".pdf"),
       });
-
+      this.numPages = 0;
+      this.src = null;
       this.reportPreview();
     },
   },
@@ -57,6 +59,7 @@ export default {
       page: 0,
       loading: null,
       numPages: 0,
+      src: null,
     };
   },
   watch: {
@@ -87,6 +90,8 @@ export default {
     //   this.$refs.pdf.$el.style.width =
     //     document.getElementsByClassName("pdf")[0].offsetHeight * 1.77 + "px";
     // });
+    this.numPages = 0;
+    this.src = null;
     this.reportPreview();
   },
   methods: {
@@ -195,7 +200,11 @@ export default {
       });
     },
     async reportPreview() {
-      this.src = pdf.createLoadingTask(this.pdfUrl);
+      this.src = pdf.createLoadingTask({
+        url: this.pdfUrl,
+        cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.16.105/cmaps/",
+        cMapPacked: true,
+      });
       this.src.promise.then((pdf) => {
         this.loading.close();
         this.numPages = pdf.numPages;