读取pdf2.0

package-lock.json

@@ -882,6 +882,36 @@
         "@vue/shared": "3.0.11"
       }
     },
+    "@vue/reactivity-transform": {
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.37.tgz",
+      "integrity": "sha512-IWopkKEb+8qpu/1eMKVeXrK0NLw9HicGviJzhJDEyfxTR9e1WtpnnbYkJWurX6WwoFP0sz10xQg8yL8lgskAZg==",
+      "requires": {
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.37",
+        "@vue/shared": "3.2.37",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7"
+      },
+      "dependencies": {
+        "@vue/compiler-core": {
+          "version": "3.2.37",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.37.tgz",
+          "integrity": "sha512-81KhEjo7YAOh0vQJoSmAD68wLfYqJvoiD4ulyedzF+OEk/bk6/hx3fTNVfuzugIIaTrOx4PGx6pAiBRe5e9Zmg==",
+          "requires": {
+            "@babel/parser": "^7.16.4",
+            "@vue/shared": "3.2.37",
+            "estree-walker": "^2.0.2",
+            "source-map": "^0.6.1"
+          }
+        },
+        "@vue/shared": {
+          "version": "3.2.37",
+          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz",
+          "integrity": "sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw=="
+        }
+      }
+    },
     "@vue/runtime-core": {
       "version": "3.0.11",
       "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.11.tgz",
@@ -901,6 +931,51 @@
         "csstype": "^2.6.8"
       }
     },
+    "@vue/server-renderer": {
+      "version": "3.2.37",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.37.tgz",
+      "integrity": "sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA==",
+      "requires": {
+        "@vue/compiler-ssr": "3.2.37",
+        "@vue/shared": "3.2.37"
+      },
+      "dependencies": {
+        "@vue/compiler-core": {
+          "version": "3.2.37",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.37.tgz",
+          "integrity": "sha512-81KhEjo7YAOh0vQJoSmAD68wLfYqJvoiD4ulyedzF+OEk/bk6/hx3fTNVfuzugIIaTrOx4PGx6pAiBRe5e9Zmg==",
+          "requires": {
+            "@babel/parser": "^7.16.4",
+            "@vue/shared": "3.2.37",
+            "estree-walker": "^2.0.2",
+            "source-map": "^0.6.1"
+          }
+        },
+        "@vue/compiler-dom": {
+          "version": "3.2.37",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.37.tgz",
+          "integrity": "sha512-yxJLH167fucHKxaqXpYk7x8z7mMEnXOw3G2q62FTkmsvNxu4FQSu5+3UMb+L7fjKa26DEzhrmCxAgFLLIzVfqQ==",
+          "requires": {
+            "@vue/compiler-core": "3.2.37",
+            "@vue/shared": "3.2.37"
+          }
+        },
+        "@vue/compiler-ssr": {
+          "version": "3.2.37",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.37.tgz",
+          "integrity": "sha512-7mQJD7HdXxQjktmsWp/J67lThEIcxLemz1Vb5I6rYJHR5vI+lON3nPGOH3ubmbvYGt8xEUaAr1j7/tIFWiEOqw==",
+          "requires": {
+            "@vue/compiler-dom": "3.2.37",
+            "@vue/shared": "3.2.37"
+          }
+        },
+        "@vue/shared": {
+          "version": "3.2.37",
+          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz",
+          "integrity": "sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw=="
+        }
+      }
+    },
     "@vue/shared": {
       "version": "3.0.11",
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.11.tgz",
@@ -1554,6 +1629,11 @@
         "esutils": "^2.0.2"
       }
     },
+    "dommatrix": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dommatrix/-/dommatrix-1.0.3.tgz",
+      "integrity": "sha512-l32Xp/TLgWb8ReqbVJAFIvXmY7go4nTxxlWiAFyhoQw9RKEOHBZNnyGvJWqDVSPmq3Y9HlM4npqF/T6VMOXhww=="
+    },
     "electron-to-chromium": {
       "version": "1.4.75",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.75.tgz",
@@ -2456,7 +2536,6 @@
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
       "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
-      "dev": true,
       "requires": {
         "sourcemap-codec": "^1.4.8"
       }
@@ -2521,8 +2600,7 @@
     "nanoid": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz",
-      "integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==",
-      "dev": true
+      "integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw=="
     },
     "natural-compare": {
       "version": "1.4.0",
@@ -2644,11 +2722,19 @@
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
       "dev": true
     },
+    "pdfjs-dist": {
+      "version": "2.14.305",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.14.305.tgz",
+      "integrity": "sha512-5f7i25J1dKIBczhgfxEgNxfYNIxXEdxqo6Qb4ehY7Ja+p6AI4uUmk/OcVGXfRGm2ys5iaJJhJUwBFwv6Jl/Qww==",
+      "requires": {
+        "dommatrix": "^1.0.1",
+        "web-streams-polyfill": "^3.2.1"
+      }
+    },
     "picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
     "picomatch": {
       "version": "2.3.1",
@@ -2660,7 +2746,6 @@
       "version": "8.4.7",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.7.tgz",
       "integrity": "sha512-L9Ye3r6hkkCeOETQX6iOaWZgjp3LL6Lpqm6EtgbKrgqGGteRMNb9vzBfRL96YOSu8o7x3MfIH9Mo5cPJFGrW6A==",
-      "dev": true,
       "requires": {
         "nanoid": "^3.3.1",
         "picocolors": "^1.0.0",
@@ -2964,14 +3049,12 @@
     "source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-      "dev": true
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
     },
     "sourcemap-codec": {
       "version": "1.4.8",
       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
-      "dev": true
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
     },
     "sprintf-js": {
       "version": "1.0.3",
@@ -3257,6 +3340,11 @@
         }
       }
     },
+    "vue-pdf-embed": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/vue-pdf-embed/-/vue-pdf-embed-1.1.4.tgz",
+      "integrity": "sha512-d4c7nM3LneWUiL4MssIyPHfGgVMRPh4Z7UgLsXMZ+lbAtH/6SBUFHdzZQLY2BASdh16BM/v6YCbmtQU+KIQdrg=="
+    },
     "vue-router": {
       "version": "4.0.13",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.13.tgz",
@@ -3265,11 +3353,117 @@
         "@vue/devtools-api": "^6.0.0"
       }
     },
+    "vue3-pdfjs": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/vue3-pdfjs/-/vue3-pdfjs-0.1.6.tgz",
+      "integrity": "sha512-7UaWbsp8wNqB0y/rRlyo5yRb0S+XOkkSpmdUuS267Dhi07Pt4RFEetQ8inrpf/aTFJwGnW0Uc/UE4p376s+Zmw==",
+      "requires": {
+        "pdfjs-dist": "^2.10.377",
+        "vue": "^3.2.19"
+      },
+      "dependencies": {
+        "@vue/compiler-core": {
+          "version": "3.2.37",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.37.tgz",
+          "integrity": "sha512-81KhEjo7YAOh0vQJoSmAD68wLfYqJvoiD4ulyedzF+OEk/bk6/hx3fTNVfuzugIIaTrOx4PGx6pAiBRe5e9Zmg==",
+          "requires": {
+            "@babel/parser": "^7.16.4",
+            "@vue/shared": "3.2.37",
+            "estree-walker": "^2.0.2",
+            "source-map": "^0.6.1"
+          }
+        },
+        "@vue/compiler-dom": {
+          "version": "3.2.37",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.37.tgz",
+          "integrity": "sha512-yxJLH167fucHKxaqXpYk7x8z7mMEnXOw3G2q62FTkmsvNxu4FQSu5+3UMb+L7fjKa26DEzhrmCxAgFLLIzVfqQ==",
+          "requires": {
+            "@vue/compiler-core": "3.2.37",
+            "@vue/shared": "3.2.37"
+          }
+        },
+        "@vue/compiler-sfc": {
+          "version": "3.2.37",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.37.tgz",
+          "integrity": "sha512-+7i/2+9LYlpqDv+KTtWhOZH+pa8/HnX/905MdVmAcI/mPQOBwkHHIzrsEsucyOIZQYMkXUiTkmZq5am/NyXKkg==",
+          "requires": {
+            "@babel/parser": "^7.16.4",
+            "@vue/compiler-core": "3.2.37",
+            "@vue/compiler-dom": "3.2.37",
+            "@vue/compiler-ssr": "3.2.37",
+            "@vue/reactivity-transform": "3.2.37",
+            "@vue/shared": "3.2.37",
+            "estree-walker": "^2.0.2",
+            "magic-string": "^0.25.7",
+            "postcss": "^8.1.10",
+            "source-map": "^0.6.1"
+          }
+        },
+        "@vue/compiler-ssr": {
+          "version": "3.2.37",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.37.tgz",
+          "integrity": "sha512-7mQJD7HdXxQjktmsWp/J67lThEIcxLemz1Vb5I6rYJHR5vI+lON3nPGOH3ubmbvYGt8xEUaAr1j7/tIFWiEOqw==",
+          "requires": {
+            "@vue/compiler-dom": "3.2.37",
+            "@vue/shared": "3.2.37"
+          }
+        },
+        "@vue/reactivity": {
+          "version": "3.2.37",
+          "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.37.tgz",
+          "integrity": "sha512-/7WRafBOshOc6m3F7plwzPeCu/RCVv9uMpOwa/5PiY1Zz+WLVRWiy0MYKwmg19KBdGtFWsmZ4cD+LOdVPcs52A==",
+          "requires": {
+            "@vue/shared": "3.2.37"
+          }
+        },
+        "@vue/runtime-core": {
+          "version": "3.2.37",
+          "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.37.tgz",
+          "integrity": "sha512-JPcd9kFyEdXLl/i0ClS7lwgcs0QpUAWj+SKX2ZC3ANKi1U4DOtiEr6cRqFXsPwY5u1L9fAjkinIdB8Rz3FoYNQ==",
+          "requires": {
+            "@vue/reactivity": "3.2.37",
+            "@vue/shared": "3.2.37"
+          }
+        },
+        "@vue/runtime-dom": {
+          "version": "3.2.37",
+          "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.37.tgz",
+          "integrity": "sha512-HimKdh9BepShW6YozwRKAYjYQWg9mQn63RGEiSswMbW+ssIht1MILYlVGkAGGQbkhSh31PCdoUcfiu4apXJoPw==",
+          "requires": {
+            "@vue/runtime-core": "3.2.37",
+            "@vue/shared": "3.2.37",
+            "csstype": "^2.6.8"
+          }
+        },
+        "@vue/shared": {
+          "version": "3.2.37",
+          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz",
+          "integrity": "sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw=="
+        },
+        "vue": {
+          "version": "3.2.37",
+          "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.37.tgz",
+          "integrity": "sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ==",
+          "requires": {
+            "@vue/compiler-dom": "3.2.37",
+            "@vue/compiler-sfc": "3.2.37",
+            "@vue/runtime-dom": "3.2.37",
+            "@vue/server-renderer": "3.2.37",
+            "@vue/shared": "3.2.37"
+          }
+        }
+      }
+    },
     "vuex": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.0.tgz",
       "integrity": "sha512-56VPujlHscP5q/e7Jlpqc40sja4vOhC4uJD1llBCWolVI8ND4+VzisDVkUMl+z5y0MpIImW6HjhNc+ZvuizgOw=="
     },
+    "web-streams-polyfill": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz",
+      "integrity": "sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q=="
+    },
     "which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

package.json

@@ -9,10 +9,13 @@
   "dependencies": {
     "axios": "^0.22.0",
     "dayjs": "^1.10.8",
+    "pdfjs-dist": "^2.14.305",
+    "vant": "^3.1.5",
     "vue": "3.0.11",
+    "vue-pdf-embed": "^1.1.4",
     "vue-router": "^4.0.6",
-    "vuex": "4.0.0",
-    "vant": "^3.1.5"
+    "vue3-pdfjs": "^0.1.6",
+    "vuex": "4.0.0"
   },
   "devDependencies": {
     "@types/node": "^14.14.41",

src/views/pdf/preview.vue

@@ -1,19 +1,76 @@
 <template>
-    <div>
 
-    </div>
+  <div ref="container"></div>
+  <h1>查看PDF文件</h1>
+  <canvas ref="renderContext"></canvas>
 </template>
+<script setup>
+import { ref,onMounted } from "vue";
+import * as PDFJS from "pdfjs-dist/legacy/build/pdf";  // 引入PDFJS 
+import pdfjsWorker from "pdfjs-dist/legacy/build/pdf.worker.entry.js"; // 引入workerSrc的地址
 
-<script lang="ts">
-export default {
-    setup () {
-        
+PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker; //设置PDFJS.GlobalWorkerOptions.workerSrc的地址
 
-        return {}
-    }
-}
-</script>
+let container = ref(null);
+let renderContext = ref(null);
+let pdfUrl = "";
+let pdfPagesNum = ref(0);
+let readerpdfDoc = null;
 
-<style lang="scss" scoped>
 
-</style>
+function pdfChange(event) {
+  if (window.createObjectURL != undefined) {
+    // basic
+    pdfUrl = window.createObjectURL(event.target.files[0]);
+  } else if (window.URL != undefined) {
+    // mozilla(firefox)
+    pdfUrl = window.URL.createObjectURL(event.target.files[0]);
+  } else if (window.webkitURL != undefined) {
+    // webkit or chrome
+    pdfUrl = window.webkitURL.createObjectURL(event.target.files[0]);
+  }
+  getPdf(pdfUrl, 1);
+}
+function getPdf(url, pageNum) {
+  PDFJS.getDocument(url).promise.then((pdfDoc) => {
+    pdfPagesNum.value = pdfDoc.numPages * 10; // pdf的总页数
+    //获取第pageNum页的数据
+    readerpdfDoc = pdfDoc;
+    showPdf(pdfDoc,pageNum)
+  });
+}
+function currentChange(num) {
+  showPdf(readerpdfDoc, num);
+}
+function showPdf(pdfDoc,pageNum) {
+  pdfDoc.getPage(pageNum).then((page) => {
+    // 设置canvas相关的属性
+    const canvas = renderContext.value;
+    const ctx = canvas.getContext("2d");
+    const dpr = window.devicePixelRatio || 1;
+    const bsr =
+      ctx.webkitBackingStorePixelRatio ||
+      ctx.mozBackingStorePixelRatio ||
+      ctx.msBackingStorePixelRatio ||
+      ctx.oBackingStorePixelRatio ||
+      ctx.backingStorePixelRatio ||
+      1;
+    const ratio = dpr / bsr;
+    const viewport = page.getViewport({ scale: 1 });
+    canvas.width = viewport.width * ratio;
+    canvas.height = viewport.height * ratio;
+    canvas.style.width = viewport.width + "px";
+    canvas.style.height = viewport.height + "px";
+    ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
+    const context = {
+      canvasContext: ctx,
+      viewport: viewport,
+    };
+    // 数据渲染到canvas画布上
+    page.render(context);
+  });
+}
+onMounted(()=>{
+     getPdf('./web/compressed.tracemonkey-pldi-09.pdf', 1);
+})
+</script>