@toolspack/ttd-pdfjs 0.0.9 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toolspack/ttd-pdfjs",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "private": false,
   "main": "lib/ttd-pdfjs.umd.min.js",
   "scripts": {
@@ -22,9 +22,9 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-babel": "~4.5.11",
     "@vue/cli-plugin-eslint": "~4.5.11",
-    "@vue/cli-service": "~4.5.0",
+    "@vue/cli-service": "^4.5.11",
     "@vue/eslint-config-airbnb": "^5.3.0",
     "babel-eslint": "^10.1.0",
     "babel-plugin-component": "^1.1.1",

package/src/packages/pdfjs/PdfView216.vue

@@ -9,12 +9,13 @@
           class="center pdf-view-area"
           @drop="onDrop"
           @dragover="onDragOver"
+          :key="pdfurl"
           :style="{'border': border?'1px solid #666': ''}"
           v-if="pdfurl"
         >
           <div v-if="fileLoading"  class="pdf-view-loading">文件加载中...</div>
-          <!-- <div v-else-if="pageRendering" class="pdf-view-rendering">内容渲染中...</div> -->
-          <canvas class="canvasstyle" ref="canvas"></canvas>
+          <div v-else-if="pageRendering" class="pdf-view-rendering">内容渲染中...</div>
+          <canvas :key="pdfurl +'canvas'" class="canvasstyle" ref="canvas"></canvas>
           <div class="label-area">
             <slot></slot>
           </div>
@@ -117,57 +118,67 @@ export default {
   },
   methods: {
     async renderPage(num) {
+      console.log('renderPage ', this.pageRendering)
+      if (this.pageRendering) {
+        this.pageNumPending = num;
+      } else {
       // 渲染pdf
-      const vm = this
-      this.pageRendering = true
-      // Using promise to fetch the page
-      try {
-        const page = await this.pdfDoc.getPage(num)
-        let scaleNum = vm.compuscale
-        let viewport = ''
-        const viewboxWidth = this.showWidth
-        if (this.initPage && viewboxWidth) {
-          const desiredWidth = parseInt(viewboxWidth, 10) - 2
-          // 首先获得pdf 原本宽度，然后根据showWidth 计算缩放倍数
-          viewport = page.getViewport({ scale: 1.0 })
-          scaleNum = desiredWidth / viewport.width
-          this.initPage = false
-          this.compuscale = scaleNum
-          this.maxscale = scaleNum
+        const vm = this
+        this.pageRendering = true
+        // Using promise to fetch the page
+        if (!this.pdfDoc) {
+          return false
         }
-        // 重新渲染 缩放过的PDF
-        viewport = page.getViewport({ scale: scaleNum })
-        this.viewport = viewport
+        try {
+          const page = await this.pdfDoc.getPage(num)
+          let scaleNum = vm.compuscale
+          let viewport = ''
+          const viewboxWidth = this.showWidth
+          if (this.initPage && viewboxWidth) {
+            const desiredWidth = parseInt(viewboxWidth, 10) - 2
+            // 首先获得pdf 原本宽度，然后根据showWidth 计算缩放倍数
+            viewport = page.getViewport({ scale: 1.0 })
+            scaleNum = desiredWidth / viewport.width
+            this.initPage = false
+            this.compuscale = scaleNum
+            this.maxscale = scaleNum
+          }
+          // 重新渲染 缩放过的PDF
+          viewport = page.getViewport({ scale: scaleNum })
+          this.viewport = viewport
 
-        // 将 canvas 尺寸 传给父组件
-        this.$emit('size', viewport, num)
+          // 将 canvas 尺寸 传给父组件
+          this.$emit('size', viewport, num)
 
-        // Render PDF page into canvas context
-        vm.isready = true
+          // Render PDF page into canvas context
+          vm.isready = true
 
-        const { canvas } = vm.$refs
+          const { canvas } = vm.$refs
 
-        this.style.width = `${viewport.width + 2}px`;
-        canvas.height = viewport.height
-        canvas.width = viewport.width
+          this.style.width = `${viewport.width + 2}px`;
+          canvas.height = viewport.height
+          canvas.width = viewport.width
 
-        const renderContext = {
-          canvasContext: canvas.getContext('2d'),
-          viewport,
-        }
-        // Wait for rendering to finish
-        await page.render(renderContext).promise
-        vm.pageRendering = false
-        if (vm.pageNumPending !== null) {
+          const renderContext = {
+            canvasContext: canvas.getContext('2d'),
+            viewport,
+          }
+          // Wait for rendering to finish
+          await page.render(renderContext).promise
+          // console.log(' await page.render 168')
+          vm.pageRendering = false
+          if (vm.pageNumPending !== null) {
           // New page rendering is pending
-          vm.renderPage(vm.pageNumPending)
-          vm.pageNumPending = null
+            vm.renderPage(vm.pageNumPending)
+            vm.pageNumPending = null
+          }
+          this.$emit('renderSuccess')
+        } catch (error) {
+          console.error(error)
+        } finally {
+          // console.log('finally 178')
+          this.pageRendering = false
         }
-        this.$emit('renderSuccess')
-      } catch (error) {
-        console.error(error)
-      } finally {
-        this.pageRendering = false
       }
     },
     prev() {
@@ -206,13 +217,15 @@ export default {
         }
         this.viewport = null
         this.pdfDoc.destroy();
+        // console.log('closepdf end')
       }
-      this.pdfDoc = null
+      // this.pdfDoc = null
       this.isready = false
       this.compuscale = this.scale
       this.$emit('closepdf')
     },
     queueRenderPage(num) {
+      // console.log('queueRenderPage 226', this.pageRendering)
       if (this.pageRendering) {
         this.pageNumPending = num
       } else {
@@ -231,6 +244,10 @@ export default {
       //   console.log('-----encodeURI------', url)
       // }
       console.log('----PdfView---', url)
+      if (this.pdfDoc) {
+        // console.log('pdfDocument is ready  destroy,,')
+        this.pdfDoc.destroy();
+      }
       let pdfDoc_
       try {
         pdfDoc_ = await PDFJS.getDocument({
@@ -249,16 +266,13 @@ export default {
       } finally {
         this.fileLoading = false
       }
-
-      // 初始化pdf
-      if (this.pdfDoc) {
-        console.log('pdfDocument is ready  destroy,,')
-        await this.closepdf();
-        this.pdfDoc = null
-      }
+      // console.log('pdfDoc_', pdfDoc_)
+      // debugger
       this.pdfDoc = pdfDoc_
+      // 初始化pdf
       this.page_count = pdfDoc_.numPages
       this.$emit('numPages', pdfDoc_.numPages)
+      // console.log('265', this.pageRendering)
       this.renderPage(this.pageNum)
       this.emitPage(this.pageNum)
     },
@@ -272,6 +286,7 @@ export default {
     },
     updateScale() {
       this.compuscale = this.scale
+      // console.log('updateScale 278')
       this.renderPage(this.pageNum)
     },
   },
@@ -296,14 +311,16 @@ export default {
     },
     pdfurl: {
       handler(val) {
+        // console.log('watch url change: ', val)
+        if (this.pdfDoc) {
+          // console.log('closepdf')
+          this.closepdf();
+        }
         this.$nextTick(() => {
           if (val) {
             this.pageNum = 1
             this.initPage = true
             this.loadUrl(val)
-            if (this.pdfDoc) {
-              this.closepdf();
-            }
           }
           if (this.showPages) {
             this.$refs.switchPage.setPage(1)
@@ -314,7 +331,13 @@ export default {
     },
     // 监听页码变化，渲染对应合同页
     page(newPage, oldPage) {
-      this.queueRenderPage(newPage)
+      // console.log('watch page change: ', newPage)
+      if (this.pdfDoc) {
+        this.queueRenderPage(newPage)
+      } else {
+        this.pageNum = newPage
+        // console.log('no pdfDoc')
+      }
     },
   },
 }