@toolspack/ttd-pdfjs 0.1.1 → 0.1.2

package/package.json

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

package/src/App.vue

@@ -15,7 +15,7 @@
   >
      <el-button>上传</el-button>
   </el-upload>
-  <PdfView :pdfurl="url" />
+  <PdfView :rotateEnable= true :zoomEnable= true :pdfurl="url" />
   </div>
 </template>
 

package/src/main.js

@@ -1,5 +1,7 @@
 import Vue from 'vue';
-import { Button, Input, Upload } from 'element-ui';
+import {
+  Button, Input, Upload, Select,
+} from 'element-ui';
 import App from './App.vue';
 
 Vue.config.productionTip = false;
@@ -7,6 +9,7 @@ Vue.config.productionTip = false;
 Vue.component(Button.name, Button);
 Vue.component(Input.name, Input);
 Vue.component(Upload.name, Upload);
+Vue.component(Select.name, Select);
 
 new Vue({
   render: (h) => h(App),

package/src/packages/pdfjs/PdfView216.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="pdf-view">
+  <div class="pdf-view" :style="style">
     <div class="pdf-view-control" v-if="showPages">
-      <switch-page ref="switchPage" :scale='compuscale' :rotate="compuRotate" :numPages="page_count"
-      :gage="page" :zoomEnable="zoomEnable" :rotateEnable="rotateEnable"
+      <switch-page ref="switchPage" :scale='compuscale' :numPages="page_count"
+      :page="page" :zoomEnable="zoomEnable" :rotateEnable="rotateEnable"
        @page="onChangePage" @zoom="onScale" @rotate="onRotate"></switch-page>
     </div>
     <div class="pdf-view-area-wapper">
-      <div :style="style">
+      <div>
         <div
           class="center pdf-view-area"
           @drop="onDrop"
@@ -50,7 +50,7 @@ if (getChromeVersion()) {
     Message({
       message: `您使用的谷歌浏览器版本过低【version:${version}】，为了更好地体验请将浏览器升级到最新版本！`,
       type: 'error',
-      duration: 3000,
+      duration: 1800,
     })
   }
 }
@@ -59,7 +59,6 @@ if (getChromeVersion()) {
 const PDFJS = require('pdfjs-dist')
 
 const defautScale = 1.0
-const defaultRotate = 0
 // PDFJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/legacy/build/pdf.worker.min.js')
 PDFJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.min.js')
 // https://unpkg.com/pdfjs-dist@2.16.105/cmaps/
@@ -81,11 +80,6 @@ export default {
       type: Number,
       default: defautScale,
     },
-
-    rotate: {
-      type: Number,
-      default: defaultRotate,
-    },
     showPages: {
       type: [String, Number, Boolean],
       default: true,
@@ -124,7 +118,7 @@ export default {
       fileLoading: true,
       pageNumPending: null,
       compuscale: defautScale, // 放大倍数
-      compuRotate: 0, // 实际旋转度数
+      compuRotate: undefined, // 实际旋转度数,  默认值必须是 undefined
       page_count: 0, // 总页数
       maxscale, // 最大放大倍数
       minscale, // 最小放大倍数
@@ -154,18 +148,24 @@ export default {
           let scaleNum = vm.compuscale
           let viewport = ''
           const viewboxWidth = this.showWidth
-          if (this.initPage && viewboxWidth) {
-            const desiredWidth = parseInt(viewboxWidth, 10) - 2
-            // 首先获得pdf 原本宽度，然后根据showWidth 计算缩放倍数
+          if (this.initPage) {
             viewport = page.getViewport({ scale: 1.0 })
-            scaleNum = desiredWidth / viewport.width
+            if (viewboxWidth) {
+              const desiredWidth = parseInt(viewboxWidth, 10) - 2
+              // 首先获得pdf 原本宽度，然后根据showWidth 计算缩放倍数
+              scaleNum = desiredWidth / viewport.width
+              this.compuscale = scaleNum
+              this.maxscale = scaleNum
+            }
+            console.log('xxxxxx', this.compuRotate, viewport.rotation)
+            this.compuRotate = viewport.rotation
             this.initPage = false
-            this.compuscale = scaleNum
-            this.maxscale = scaleNum
           }
           // 重新渲染 缩放过的PDF
+          console.log('1111111', this.compuRotate)
           viewport = page.getViewport({ scale: scaleNum, rotation: this.compuRotate })
           this.viewport = viewport
+          console.log('22222222', viewport)
 
           // 将 canvas 尺寸 传给父组件
           this.$emit('size', viewport, num)
@@ -314,7 +314,8 @@ export default {
       this.renderPage(this.pageNum)
     },
     onRotate(rotate) {
-      this.compuRotate = rotate
+      console.log('000000', this.compuRotate, rotate)
+      this.compuRotate += rotate
       this.renderPage(this.pageNum)
     },
   },
@@ -335,14 +336,6 @@ export default {
       },
       immediate: true,
     },
-    rotate: {
-      handler(val) {
-        if (val) {
-          this.compuRotate = val
-        }
-      },
-      immediate: true,
-    },
     pdfurl: {
       handler(val) {
         // console.log('watch url change: ', val)

package/src/packages/pdfjs/SwitchPage.vue

@@ -21,8 +21,12 @@
       </el-select>
     </div>
     <div class='switch-page-rotate'>
-      <el-button size="mini" @click="rotateRight" :disabled="!rotateEnable" icon=el-icon-refresh-right>顺时针旋转</el-button>
-      <el-button size="mini" @click="rotateLeft" :disabled="!rotateEnable" icon=el-icon-refresh-left>逆时针旋转</el-button>
+      <el-button size="mini" @click="rotateRight" :disabled="!rotateEnable" icon=el-icon-refresh-right>
+        <span class=hidden-text>顺时针旋转</span>
+      </el-button>
+      <el-button size="mini" @click="rotateLeft" :disabled="!rotateEnable" icon=el-icon-refresh-left>
+        <span class=hidden-text>逆时针旋转</span>
+      </el-button>
     </div>
   </div>
 </template>
@@ -57,10 +61,6 @@ export default {
       type: [Number],
       default: 1,
     },
-    rotate: {
-      type: [Number],
-      default: 0,
-    },
     zoomEnable: {
       type: [String, Number, Boolean],
       default: false,
@@ -96,12 +96,6 @@ export default {
       },
       immediate: true,
     },
-    rotate: {
-      handler(value) {
-        this.itemRotate = value
-      },
-      immediate: true,
-    },
   },
   methods: {
     switchPage(str) {
@@ -183,9 +177,14 @@ export default {
     flex: 1;
     text-align: center;
   }
-}
-.switch-page button {
-  font-size: 14px;
-  padding: 6px !important;
+  button {
+    font-size: 14px;
+    padding: 6px !important;
+  }
+  @media (min-width: 731px) {
+    .hidden-text {
+      display: none;
+    }
+  }
 }
 </style>