@toolspack/ttd-pdfjs 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toolspack/ttd-pdfjs",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "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 :scale="1.5" :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,14 +148,18 @@ 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
           viewport = page.getViewport({ scale: scaleNum, rotation: this.compuRotate })
@@ -314,7 +312,7 @@ export default {
       this.renderPage(this.pageNum)
     },
     onRotate(rotate) {
-      this.compuRotate = rotate
+      this.compuRotate += rotate
       this.renderPage(this.pageNum)
     },
   },
@@ -335,14 +333,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

@@ -1,5 +1,5 @@
 <template lang="html">
-  <div class="switch-page">
+  <div class="ttd-pdfjs-switch-page" ref=switchPageBox>
     <div class='switch-page-btn'>
       <el-button size="mini" @click="switchPage('prev')" icon=el-icon-arrow-up>上一页</el-button>
       <el-button size="mini" @click="switchPage('next')" icon=el-icon-arrow-down>下一页</el-button>
@@ -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,14 +96,11 @@ export default {
       },
       immediate: true,
     },
-    rotate: {
-      handler(value) {
-        this.itemRotate = value
-      },
-      immediate: true,
-    },
   },
   methods: {
+    mounted() {
+
+    },
     switchPage(str) {
       if (str === 'prev') {
         if (this.itemPage === 1) {
@@ -173,8 +170,8 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
-.switch-page {
+<style lang="less">
+.ttd-pdfjs-switch-page {
   margin: 0;
   padding: 0;
   display: flex;
@@ -182,10 +179,20 @@ export default {
   .switch-page-scale{
     flex: 1;
     text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    .el-select{
+      width: 140px;
+    }
+  }
+  button {
+    font-size: 14px;
+    padding: 6px !important;
+  }
+  @media (max-width: 731px) {
+    .hidden-text {
+      display: none;
+    }
   }
-}
-.switch-page button {
-  font-size: 14px;
-  padding: 6px !important;
 }
 </style>