修改pdf预览

package.json

@@ -39,6 +39,7 @@
     "vue": "^2.6.11",
     "vue-count-to": "^1.0.13",
     "vue-pdf": "^4.3.0",
+    "vue-pdf-signature": "^4.2.7",
     "vue-router": "^3.3.4",
     "vue-virtual-scroller": "^1.0.10",
     "vuedraggable": "^2.24.3",

src/views/Home/PdfView/index.vue

 <template>
   <div class="pdf">
-    <div v-loading="!loadedRatio" class="show">
+    <div
+      v-loading="!loadedRatio"
+      class="show"
+    >
       <pdf
         ref="pdf"
-        :src="pdfUrl"
+        :src="pdfSrc"
         :page="pageNum"
         :rotate="pageRotate"
         @password="password"
@@ -18,17 +21,29 @@
 
     <div class="pdf_footer">
       <div class="info">
-        <div>当前页数/总页数：{{ pageNum }}/{{ pageTotalNum }}</div>
-        <div>进度：{{ loadedRatio }}</div>
-        <div>页面加载成功: {{ curPageNum }}</div>
+        <div style="margin:0 auto;">当前页数/总页数：{{ pageNum }}/{{ pageTotalNum }}</div>
+        <!-- <div>进度：{{ loadedRatio }}</div>
+        <div>页面加载成功: {{ curPageNum }}</div> -->
       </div>
       <div class="operate">
         <!-- <div class="btn" @click.stop="clock">顺时针</div>
         <div class="btn" @click.stop="counterClock">逆时针</div> -->
-        <div class="btn" @click.stop="prePage">上一页</div>
-        <div class="btn" @click.stop="nextPage">下一页</div>
-        <div class="btn" @click="scaleD">放大</div>
-        <div class="btn" @click="scaleX">缩小</div>
+        <div
+          class="btn"
+          @click.stop="prePage"
+        >上一页</div>
+        <div
+          class="btn"
+          @click.stop="nextPage"
+        >下一页</div>
+        <div
+          class="btn"
+          @click="scaleD"
+        >放大</div>
+        <div
+          class="btn"
+          @click="scaleX"
+        >缩小</div>
         <!-- <div class="btn" @click="pdfPrint()">打印所有指定页</div>
         <div class="btn" @click="pdfPrintAll()">打印所有</div> -->
         <!-- <div class="btn" @click="logContent()">获取页面信息</div> -->
@@ -40,7 +55,9 @@
 
 <script>
 /* eslint-disable */
-import pdf from "vue-pdf"
+import pdf from "vue-pdf-signature"
+import CMapReaderFactory from "vue-pdf-signature/src/CMapReaderFactory.js";
+
 export default {
   name: "vue_pdf_preview",
   props: {
@@ -53,8 +70,10 @@ export default {
   components: {
     pdf,
   },
-  data() {
+  data () {
     return {
+      // pdfSrcs: "/早期胃癌.pdf",
+      pdfSrc: "",
       // 总页数
       pageTotalNum: 1,
       // 当前页数
@@ -73,11 +92,19 @@ export default {
   },
   watch: {},
   computed: {},
-  created() {},
-  mounted() {},
+  created () {
+  },
+  mounted () {
+  },
   methods: {
+    loadPDF () {
+      this.pdfSrc = pdf.createLoadingTask({
+        url: this.pdfUrl,
+        CMapReaderFactory
+      });
+    },
     //下载PDF
-    fileDownload(data, fileName) {
+    fileDownload (data, fileName) {
       let blob = new Blob([data], {
         //type类型后端返回来的数据中会有，根据自己实际进行修改
         type: "application/pdf;charset-UTF-8",
@@ -103,7 +130,7 @@ export default {
     },
 
     //放大
-    scaleD() {
+    scaleD () {
       if (this.scale == 120) {
         return
       }
@@ -113,7 +140,7 @@ export default {
     },
 
     //缩小
-    scaleX() {
+    scaleX () {
       // scale 是百分百展示 不建议缩放
       if (this.scale == 85) {
         return
@@ -124,55 +151,56 @@ export default {
       this.$emit("scale", this.scale)
     },
     // 切换上一页
-    prePage() {
+    prePage () {
       var p = this.pageNum
       p = p > 1 ? p - 1 : this.pageTotalNum
       this.pageNum = p
       document.querySelector(".pdf .show").scrollTop = 0
     },
     // 切换下一页
-    nextPage() {
+    nextPage () {
       var p = this.pageNum
       p = p < this.pageTotalNum ? p + 1 : 1
       this.pageNum = p
       document.querySelector(".pdf .show").scrollTop = 0
     },
     // 顺时针选中角度
-    clock() {
+    clock () {
       this.pageRotate += 90
     },
     // 逆时针旋转角度
-    counterClock() {
+    counterClock () {
       this.pageRotate -= 90
     },
     // pdf 有密码 则需要输入秘密
-    password(updatePassword, reason) {
+    password (updatePassword, reason) {
       updatePassword(prompt('password is "test"'))
       console.log("...reason...")
       console.log(reason)
       console.log("...reason...")
     },
     // 页面加载成功  当前页数
-    pageLoaded(e) {
+    pageLoaded (e) {
       this.$emit("current", e)
       this.curPageNum = e
+      this.loadedRatio = 1
     },
     // 异常监听
-    pdfError(error) {
+    pdfError (error) {
       console.error(error)
     },
     // 打印所有
-    pdfPrintAll() {
+    pdfPrintAll () {
       this.$refs.pdf.print()
     },
     // 打印 第一页和第二页
-    pdfPrint() {
+    pdfPrint () {
       // 第一个参数 文档打印的分辨率
       // 第二个参数 文档打印的页数
       this.$refs.pdf.print(100, [1, 2])
     },
     // 获取当前页面pdf的文字信息内容
-    logContent() {
+    logContent () {
       this.$refs.pdf.pdf.forEachPage(function (page) {
         return page.getTextContent().then(function (content) {
           let text = content.items.map((item) => item.str)
@@ -186,6 +214,9 @@ export default {
       })
     },
   },
+  beforeDestroy () {
+    this.pdfSrc = null
+  }
 }
 </script>
 

yarn.lock

@@ -7996,6 +7996,11 @@ pbkdf2@^3.0.3:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+pdfjs-dist-sign@^2.5.208:
+  version "2.5.208"
+  resolved "https://registry.npmmirror.com/pdfjs-dist-sign/-/pdfjs-dist-sign-2.5.208.tgz#34c840d01a7d3fa992bcf06709461311083c9cb5"
+  integrity sha512-/bOZqdVkq1vQzCJY0qH/d6vO739VJ6X9mF7UWEWJ2WoZJij1+NOl+qTQxNgpXACp07/fhxC3GE/1+IgeDq40kQ==
+
 pdfjs-dist@2.6.347:
   version "2.6.347"
   resolved "https://registry.npmmirror.com/pdfjs-dist/-/pdfjs-dist-2.6.347.tgz#f257ed66e83be900cd0fd28524a2187fb9e25cd5"
@@ -8804,7 +8809,7 @@ raw-body@2.4.0:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-raw-loader@^4.0.2:
+raw-loader@^4.0.1, raw-loader@^4.0.2:
   version "4.0.2"
   resolved "https://registry.npmmirror.com/raw-loader/-/raw-loader-4.0.2.tgz#1aac6b7d1ad1501e66efdac1522c73e59a584eb6"
   integrity sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==
@@ -10884,6 +10889,18 @@ vue-observe-visibility@^0.4.4:
   resolved "https://registry.yarnpkg.com/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz#878cb8ebcf3078e40807af29774e97105ebd519e"
   integrity sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q==
 
+vue-pdf-signature@^4.2.7:
+  version "4.2.7"
+  resolved "https://registry.npmmirror.com/vue-pdf-signature/-/vue-pdf-signature-4.2.7.tgz#44851a425dc89d93fb02574d3f79bccac69a3fb2"
+  integrity sha512-JPyd46wkY3E8OQZ0VklIco4J2Zo2YsEUz1bfyheDtLd9NaJS0+YYRrfxCotQMLvR1QHNJZmcOsPBZ+5mosHiqQ==
+  dependencies:
+    babel-plugin-syntax-dynamic-import "^6.18.0"
+    loader-utils "^1.4.0"
+    pdfjs-dist-sign "^2.5.208"
+    raw-loader "^4.0.1"
+    vue-resize-sensor "^2.0.0"
+    worker-loader "^2.0.0"
+
 vue-pdf@^4.3.0:
   version "4.3.0"
   resolved "https://registry.npmmirror.com/vue-pdf/-/vue-pdf-4.3.0.tgz#d5f790ee7967e7b7aa9089b97b11ab168e19dbd0"