@toolspack/ttd-pdfjs 0.1.6 → 0.1.8

package/package.json

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

package/src/packages/pdfjs/PdfView.vue

@@ -6,24 +6,22 @@
        @page="onChangePage" @zoom="onScale" @rotate="onRotate"></switch-page>
     </div>
     <div class="pdf-view-area-wapper">
-      <div>
-        <div
-          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 :key="pdfurl +'canvas'" class="canvasstyle" ref="canvas"></canvas>
-          <div class="label-area">
-            <slot></slot>
-          </div>
+      <div
+        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 :key="pdfurl +'canvas'" class="canvasstyle" :style="{with: showWidth?showWidth+'px':'auto'}" ref="canvas"></canvas>
+        <div class="label-area">
+          <slot></slot>
         </div>
-        <div v-else class="pdf-view-empty">未找到资源，请联系管理员!</div>
       </div>
+      <div v-else class="pdf-view-empty">未找到资源，请联系管理员!</div>
     </div>
   </div>
 </template>
@@ -121,6 +119,7 @@ export default {
       pageNumPending: null,
       compuscale: defautScale, // 放大倍数
       compuRotate: undefined, // 实际旋转度数,  默认值必须是 undefined
+      pdf_rotation: 0, // pdf 的旋转度数
       page_count: 0, // 总页数
       maxscale, // 最大放大倍数
       minscale, // 最小放大倍数
@@ -135,7 +134,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 +151,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)
 
@@ -178,7 +177,8 @@ export default {
           if (!canvas) {
             return false
           }
-          this.style.width = `${viewport.width + 18}px`;
+          // pdf 组件不应该 有滚动条
+          this.style.width = `${viewport.width + 2}px`;
           this.pdfWidth = `${viewport.width}px`;
           canvas.height = viewport.height
           canvas.width = viewport.width
@@ -219,9 +219,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)
@@ -267,7 +270,6 @@ export default {
       //   url = encodeURI(url)
       //   console.log('-----encodeURI------', url)
       // }
-      console.log('----PdfView---', url)
       if (this.pdfDoc) {
         // console.log('pdfDocument is ready  destroy,,')
         this.pdfDoc.destroy();
@@ -318,7 +320,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)
     },
   },
@@ -375,10 +382,6 @@ export default {
 
 <style lang="less" scoped>
 .pdf-view {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
   box-sizing: border-box;
   min-width: 688px;
 }
@@ -387,11 +390,7 @@ export default {
   margin: 10px 0;
 }
 .pdf-view-area-wapper {
-  flex: 1 1 0%;
-  overflow: auto;
-  width: 100%;
-  flex-shrink: 0%;
-  box-sizing: border-box;
+  overflow: hidden;
 }
 .pdf-view-area {
   position: relative;