pdf

src/router/index.js

@@ -49,6 +49,15 @@ const routes = [
       title: '目录'
     },
     component: () => import(/* webpackChunkName: "PdfView" */ '@/views/pdf/') // 首页
+  },
+  {
+    path: '/pdfTwo',
+    name: 'PdfViewTwo',
+    meta: {
+      menu: true,
+      title: '目录'
+    },
+    component: () => import(/* webpackChunkName: "PdfViewTwo" */ '@/views/pdf/two.vue') // 首页
   }
 ].concat(userRouter, memberRouter, qulificationRouter, regIssueRouter, homeRouter)
 

src/views/pdf/two.vue

+<template>
+  <div class="pdf_container">
+    <NafmHeader navClass="nafmii-head-bg3" title="详情页面">
+      <template #bottom>
+        <div class="header">
+          <div class="header_left">
+            <span class="pre" @click="handlePre">上一页</span>
+            <span class="next" @click="handleNext">下一页</span>
+          </div>
+
+          <div class="center">
+            <input type="text" v-model.number="inputValue" class="inputClass" @change="handleChange"> <span>/ {{pageCount}}</span>
+          </div>
+          <div class="header_right">
+            <span class="pre" @click="handleScaleBig">放大</span>
+            <span class="pre" @click="handleScaleSmall">缩小</span>
+            <span class="next" @click="handleReset">重置</span>
+          </div>
+
+        </div>
+      </template>
+    </NafmHeader>
+    <Pdf v-for="(i,index) in numPages" :key="i" :src="src" :ref="`wrapper${index}`" :page="i" @num-pages="pageCount = $event" @page-loaded="currentPage = $event" />
+  </div>
+</template>
+
+<script>
+import Pdf from 'vue-pdf'
+export default {
+  components: {
+    Pdf
+  },
+  data() {
+    return {
+      inputValue: 1,
+      currentPage: 0,
+      pageCount: 0,
+      fileUrl: `${window.location.origin}/study.pdf`,
+      numPages: undefined,
+      src: '',
+      scale: 100,
+    }
+  },
+  created() {
+    this.src = Pdf.createLoadingTask(this.fileUrl)
+    this.src.promise.then(pdf => {
+      this.numPages = pdf.numPages
+    })
+
+  },
+  mounted() {
+    // this.src.promise.then(pdf => {
+    //   this.numPages = pdf.numPages
+    // })
+    console.log('---', this.currentPage)
+
+  },
+  methods: {
+    onLoad(val) {
+      this.currentPage = val || 1
+      this.inputValue = this.currentPage
+      // this.src.then(pdf => { this.currentPage = pdf.numPages; });
+
+    },
+    handlePre() {
+      if (this.currentPage == 1) {
+        Toast('已在第一页')
+        return
+      } else {
+        this.currentPage--
+      }
+      this.inputValue = this.currentPage
+    },
+    handleNext() {
+      if (this.currentPage == this.pageCount) {
+        Toast('已在末页')
+        return
+      } else {
+        this.currentPage++
+      }
+      this.inputValue = this.currentPage
+    },
+    pageLoad(val) {
+      console.log(val, this.currentPage);
+    },
+    handleChange(e) {
+      console.log('val-->', val)
+      const val = e.target.value
+      if (val > this.pageCount) {
+        Toast('输入值不能大于总页数')
+        this.inputValue = ''
+        return
+      }
+      if (val < 1 || val == "" || val == '') {
+        Toast('输入值小于了最小页数')
+        this.inputValue = ''
+        return
+      }
+      try {
+        console.log('val', val);
+        this.currentPage = Number(val)
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    handleScaleBig() {
+      const canvas = document.querySelector('canvas')
+      this.scale += 10;
+      //   canvas.style.width = parseInt(this.scale) + "%";
+      canvas.style.width = parseInt(this.scale) + "%";
+      canvas.style.height = parseInt(100) + "%";
+    },
+    handleScaleSmall() {
+      const canvas = document.querySelector('canvas')
+      if (this.scale == 100) {
+        return;
+      }
+      this.scale += -10;
+      canvas.style.width = parseInt(this.scale) + "%";
+      canvas.style.height = parseInt(100) + "%";
+    },
+    handleReset() {
+      const canvas = document.querySelector('canvas')
+      canvas.style.width = parseInt(100) + "%";
+      canvas.style.height = parseInt(100) + "%";
+      this.currentPage = 1
+      this.inputValue = 1
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.header {
+  display: flex;
+  height: 50px;
+  align-items: center;
+  .pre {
+    width: 50px;
+    margin-right: 5px;
+  }
+  .next {
+    width: 50px;
+  }
+  .center {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+.inputClass {
+  width: 50px;
+  color: #333;
+  margin-right: 2px;
+  text-align: center;
+}
+/deep/ .annotationLayer {
+  margin-bottom: 10px;
+  border-bottom: 10px solid #ccc;
+}
+</style>
\ No newline at end of file