Tue Mar 5 15:51:00 CST 2024 inscode

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "guess": "^1.0.2",
+    "pdfjs-dist": "^4.0.379",
     "vue": "^3.2.37"
   },
   "devDependencies": {

src/App.vue

-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
-
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
+  <div>123
+    <PdfPreview :url="pdfUrl" />
+  </div>
 </template>
 
-<style scoped>
-header {
-  line-height: 1.5;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-}
-</style>
+<script>
+import PdfPreview from './components/PdfPreview.vue';
+
+export default {
+  components: {
+    PdfPreview,
+  },
+  data() {
+    return {
+      pdfUrl: 'https://file.iviewui.com/inscode/demo1.pdf',
+    };
+  },
+};
+</script>

src/components/PdfPreview.vue

+<template>
+  <div class="pdf-preview">
+    <canvas ref="pdfCanvas"></canvas>
+  </div>
+</template>
+
+<script>
+import pdfjsLib from 'pdfjs-dist';
+import { getDocument } from 'pdfjs-dist/build/pdf';
+
+export default {
+  props: {
+    url: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      page: 1,
+      scale: 1,
+      canvas: null,
+      ctx: null,
+    };
+  },
+  mounted() {
+    this.canvas = this.$refs.pdfCanvas;
+    this.ctx = this.canvas.getContext('2d');
+    this.loadPdf();
+  },
+  methods: {
+    async loadPdf() {
+      this.loading = true;
+
+      const doc = await getDocument(this.url).promise;
+      this.pdfDoc = doc;
+      this.numPages = doc.numPages;
+
+      this.renderPage(1);
+    },
+
+    async renderPage(pageNumber) {
+      if (!this.pdfDoc) {
+        return;
+      }
+
+      this.loading = true;
+
+      const page = await this.pdfDoc.getPage(pageNumber);
+
+      const viewport = page.getViewport({ scale: this.scale });
+      this.canvas.width = viewport.width;
+      this.canvas.height = viewport.height;
+
+      const renderContext = {
+        canvasContext: this.ctx,
+        viewport,
+      };
+
+      page.render(renderContext);
+
+      this.loading = false;
+    },
+
+    nextPage() {
+      if (this.page < this.numPages) {
+        this.page++;
+        this.renderPage(this.page);
+      }
+    },
+
+    prevPage() {
+      if (this.page > 1) {
+        this.page--;
+        this.renderPage(this.page);
+      }
+    },
+
+    zoomIn() {
+      this.scale += 0.2;
+      this.renderPage(this.page);
+    },
+
+    zoomOut() {
+      this.scale -= 0.2;
+      this.renderPage(this.page);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.pdf-preview canvas {
+  display: block;
+}
+</style>