@toolspack/ttd-pdfjs 0.1.5 → 0.1.7

package/package.json

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

package/src/packages/pdfjs/PdfView.vue

@@ -5,7 +5,7 @@
       :page="page" :zoomEnable="zoomEnable" :rotateEnable="rotateEnable"
        @page="onChangePage" @zoom="onScale" @rotate="onRotate"></switch-page>
     </div>
-    <div class="pdf-view-area-wapper" :style="{width: pdfWidth}" >
+    <div class="pdf-view-area-wapper">
       <div>
         <div
           class="center pdf-view-area"
@@ -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>
@@ -59,6 +59,7 @@ const PDFJS = require('pdfjs-dist')
 
 const defautScale = 1.0
 // PDFJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/legacy/build/pdf.worker.min.js')
+// eslint-disable-next-line
 PDFJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.min.js')
 // https://unpkg.com/pdfjs-dist@2.16.105/cmaps/
 // 使用代理的cmaps，会导致加载很慢，改用本地
@@ -120,6 +121,7 @@ export default {
       pageNumPending: null,
       compuscale: defautScale, // 放大倍数
       compuRotate: undefined, // 实际旋转度数,  默认值必须是 undefined
+      pdf_rotation: 0, // pdf 的旋转度数
       page_count: 0, // 总页数
       maxscale, // 最大放大倍数
       minscale, // 最小放大倍数
@@ -134,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 {
@@ -151,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)
 
@@ -177,7 +179,7 @@ export default {
           if (!canvas) {
             return false
           }
-          this.style.width = `${viewport.width + 2}px`;
+          this.style.width = `${viewport.width + 18}px`;
           this.pdfWidth = `${viewport.width}px`;
           canvas.height = viewport.height
           canvas.width = viewport.width
@@ -218,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)
@@ -317,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)
     },
   },
@@ -378,6 +388,7 @@ export default {
   width: 100%;
   display: flex;
   flex-direction: column;
+  box-sizing: border-box;
   min-width: 688px;
 }
 .pdf-view-control {
@@ -389,10 +400,12 @@ export default {
   overflow: auto;
   width: 100%;
   flex-shrink: 0%;
+  box-sizing: border-box;
 }
 .pdf-view-area {
   position: relative;
   min-height: 100px;
+  box-sizing: border-box;
   .canvasstyle {
     display: block;
     margin: 0 auto;