@toolspack/ttd-pdfjs 0.1.6 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toolspack/ttd-pdfjs",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "private": false,
   "main": "lib/ttd-pdfjs.umd.min.js",
   "scripts": {

package/src/packages/pdfjs/PdfView.vue

@@ -17,7 +17,7 @@
         >
           <div v-if="fileLoading"  class="pdf-view-loading">文件加载中...</div>
           <div v-else-if="pageRendering" class="pdf-view-rendering">内容渲染中...</div>
-          <canvas :key="pdfurl +'canvas'" class="canvasstyle" ref="canvas"></canvas>
+          <canvas :key="pdfurl +'canvas'" class="canvasstyle" :style="{with: showWidth?showWidth+'px':'auto'}" ref="canvas"></canvas>
           <div class="label-area">
             <slot></slot>
           </div>
@@ -121,6 +121,7 @@ export default {
       pageNumPending: null,
       compuscale: defautScale, // 放大倍数
       compuRotate: undefined, // 实际旋转度数,  默认值必须是 undefined
+      pdf_rotation: 0, // pdf 的旋转度数
       page_count: 0, // 总页数
       maxscale, // 最大放大倍数
       minscale, // 最小放大倍数
@@ -135,7 +136,7 @@ export default {
   },
   methods: {
     async renderPage(num) {
-      console.log('renderPage ', this.pageRendering)
+      // console.log('renderPage ', num, this.pageRendering)
       if (this.pageRendering) {
         this.pageNumPending = num;
       } else {
@@ -152,22 +153,22 @@ export default {
           let viewport = ''
           const viewboxWidth = this.showWidth
           if (this.initPage) {
-            viewport = page.getViewport({ scale: 1.0 })
+            const viewportInit = await page.getViewport({ scale: 1.0 })
             if (viewboxWidth) {
               const desiredWidth = parseInt(viewboxWidth, 10) - 2
               // 首先获得pdf 原本宽度，然后根据showWidth 计算缩放倍数
-              scaleNum = desiredWidth / viewport.width
+              scaleNum = desiredWidth / viewportInit.width
               this.compuscale = scaleNum
               this.maxscale = scaleNum
             }
             // console.log('xxxxxx', this.compuRotate, viewport.rotation)
-            this.compuRotate = viewport.rotation
+            this.pdf_rotation = viewportInit.rotation
             this.initPage = false
           }
           // 重新渲染 缩放过的PDF
-          viewport = page.getViewport({ scale: scaleNum, rotation: this.compuRotate })
+          viewport = await page.getViewport({ scale: scaleNum, rotation: this.compuRotate })
           this.viewport = viewport
-
+          // console.log('rotation -', num, viewport.rotation)
           // 将 canvas 尺寸 传给父组件
           this.$emit('size', viewport, num)
 
@@ -219,9 +220,12 @@ export default {
         return
       }
       this.pageNum++
+      // console.log('next', this.pageNum)
       this.queueRenderPage(this.pageNum)
     },
     onChangePage(page) {
+      this.pageNum = page
+      // console.log('onChangePage', page)
       this.emitPage(page)
       // switch page  改变页码
       this.queueRenderPage(page)
@@ -318,7 +322,12 @@ export default {
       this.renderPage(this.pageNum)
     },
     onRotate(rotate) {
-      this.compuRotate += rotate
+      // console.log('rotate -', rotate, this.compuRotate, this.pageNum)
+      if (this.compuRotate === undefined) {
+        this.compuRotate = this.pdf_rotation + rotate
+      } else {
+        this.compuRotate += rotate
+      }
       this.renderPage(this.pageNum)
     },
   },