@toolspack/ttd-pdfjs 0.0.10 → 0.1.0

package/package.json

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

package/src/packages/pdfjs/PdfView216.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="pdf-view">
     <div class="pdf-view-control" v-if="showPages">
-      <switch-page ref="switchPage" @page="onChangePage" :numPages="page_count"></switch-page>
+      <switch-page ref="switchPage" :scale='compuscale' :rotate="compuRotate" :numPages="page_count"
+      :gage="page" :zoomEnable="zoomEnable" :rotateEnable="rotateEnable"
+       @page="onChangePage" @zoom="onScale" @rotate="onRotate"></switch-page>
     </div>
     <div class="pdf-view-area-wapper">
       <div :style="style">
@@ -57,6 +59,7 @@ 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/
@@ -65,6 +68,9 @@ PDFJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.min.j
 
 const cMapUrl = 'https://wsp.totodi.com/staticfiles_web/web/pdfjs/cmaps/'
 
+export const maxscale = 3
+export const minscale = 0.2
+
 export default {
   components: { SwitchPage },
   props: {
@@ -75,10 +81,23 @@ export default {
       type: Number,
       default: defautScale,
     },
+
+    rotate: {
+      type: Number,
+      default: defaultRotate,
+    },
     showPages: {
       type: [String, Number, Boolean],
       default: true,
     },
+    zoomEnable: {
+      type: [String, Number, Boolean],
+      default: false,
+    },
+    rotateEnable: {
+      type: [String, Number, Boolean],
+      default: false,
+    },
     border: {
       type: [String, Number, Boolean],
       default: true,
@@ -105,9 +124,10 @@ export default {
       fileLoading: true,
       pageNumPending: null,
       compuscale: defautScale, // 放大倍数
+      compuRotate: 0, // 实际旋转度数
       page_count: 0, // 总页数
-      maxscale: 1.5, // 最大放大倍数
-      minscale: 0.8, // 最小放大倍数
+      maxscale, // 最大放大倍数
+      minscale, // 最小放大倍数
       isready: false,
       initPage: true, // 初始化页面
       style: {
@@ -144,7 +164,7 @@ export default {
             this.maxscale = scaleNum
           }
           // 重新渲染 缩放过的PDF
-          viewport = page.getViewport({ scale: scaleNum })
+          viewport = page.getViewport({ scale: scaleNum, rotation: this.compuRotate })
           this.viewport = viewport
 
           // 将 canvas 尺寸 传给父组件
@@ -289,13 +309,16 @@ export default {
       // console.log('updateScale 278')
       this.renderPage(this.pageNum)
     },
+    onScale(scale) {
+      this.compuscale = scale
+      this.renderPage(this.pageNum)
+    },
+    onRotate(rotate) {
+      this.compuRotate = rotate
+      this.renderPage(this.pageNum)
+    },
   },
   mounted() {
-    this.compuscale = this.scale
-    // this.initPage = true
-    // if (this.pdfurl) {
-    //   this.loadUrl(this.pdfurl)
-    // }
   },
   beforeDestroy() {
     // console.log('---', this.pdfDoc)
@@ -304,10 +327,21 @@ export default {
     }
   },
   watch: {
-    scale(val) {
-      if (val) {
-        this.compuscale = val
-      }
+    scale: {
+      handler(val) {
+        if (val) {
+          this.compuscale = val
+        }
+      },
+      immediate: true,
+    },
+    rotate: {
+      handler(val) {
+        if (val) {
+          this.compuRotate = val
+        }
+      },
+      immediate: true,
     },
     pdfurl: {
       handler(val) {

package/src/packages/pdfjs/SwitchPage.vue

@@ -1,79 +1,191 @@
 <template lang="html">
   <div class="switch-page">
-    <el-button size="mini" @click="switchPage('prev')"><i class="el-icon-caret-left"></i></el-button>
-    <el-button size="mini" @click="switchPage('next')"><i class="el-icon-caret-right"></i></el-button>
-    <span style="margin-left: 10px;">{{page}}/{{numPages}}</span>
-    <span style="margin-left: 6px">
-      跳转至
-      <el-input v-model.number="itemPage" style="width: 50px;margin: 0 4px" size="mini" @keyup.native.enter="goPage"></el-input>
-      页
-    </span>
+    <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>
+      <span style="margin-left: 6px">
+        <el-input v-model.number="itemPage" style="width: 50px;margin: 0 4px; font-size:14px;" size="mini"
+          @keyup.native.enter="goPage"  @change="goPage"></el-input>/{{numPages}}
+      </span>
+    </div>
+    <div class='switch-page-scale'>
+      <el-button size="mini" :disabled="!zoomEnable" @click="zoomIn" icon=el-icon-minus></el-button>
+      <el-button size="mini" :disabled="!zoomEnable" @click="zoomOut" icon=el-icon-plus></el-button>
+      <el-select v-model="itemScale" :disabled="!zoomEnable" @change=onZoomChange size="mini" style="margin-left:10px" placeholder="请选择">
+        <el-option
+          v-for="item in EnumOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </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>
+    </div>
   </div>
 </template>
 
 <script>
+import { maxscale, minscale } from './PdfView216.vue'
+
+export const EnumOptions = [
+  // { label: '自动缩放', value: '' },
+  // { label: '实际大小', value: '' },
+  // { label: '适合页面', value: '' },
+  // { label: '适合页宽', value: 'auto' },
+  { label: '50%', value: '50%' },
+  { label: '75%', value: '75%' },
+  { label: '100%', value: '100%' },
+  { label: '125%', value: '125%' },
+  { label: '150%', value: '150%' },
+  { label: '200%', value: '200%' },
+  { label: '300%', value: '300%' },
+]
 export default {
   name: 'switch-page',
   props: {
     numPages: {
       type: [Number, String],
     },
+    page: {
+      type: [Number, String],
+      default: 1,
+    },
+    scale: {
+      type: [Number],
+      default: 1,
+    },
+    rotate: {
+      type: [Number],
+      default: 0,
+    },
+    zoomEnable: {
+      type: [String, Number, Boolean],
+      default: false,
+    },
+    rotateEnable: {
+      type: [String, Number, Boolean],
+      default: false,
+    },
   },
   data() {
     return {
-      page: 1,
-      itemPage: '',
+      itemPage: '', // 内部保存的页码，
+      EnumOptions,
+      itemScale: 'auto',
+      itemRotate: 0,
     }
   },
   watch: {
-    numPages() {
-      this.page = 1
-      this.itemPage = ''
+    page: {
+      handler(value) {
+        this.itemPage = value
+      },
+      immediate: true,
+    },
+    numPages: {
+      handler(value) {
+        this.itemPage = 1
+      },
+    },
+    scale: {
+      handler(value) {
+        this.itemScale = `${Math.round(value * 100)}%`
+      },
+      immediate: true,
+    },
+    rotate: {
+      handler(value) {
+        this.itemRotate = value
+      },
+      immediate: true,
     },
   },
   methods: {
     switchPage(str) {
       if (str === 'prev') {
-        if (this.page === 1) {
+        if (this.itemPage === 1) {
           return
         }
-        this.page--
+        this.itemPage--
       }
       if (str === 'next') {
-        if (this.page === this.numPages) {
+        if (this.itemPage === this.numPages) {
           this.$message({ message: '当前已是最后一页', type: 'warning' })
           return
         }
-        this.page++
+        this.itemPage++
       }
-      this.$emit('page', this.page)
+      this.$emit('page', this.itemPage)
     },
     setPage(page = 1) {
-      this.page = page
+      this.itemPage = page
     },
     goPage() {
       if (this.itemPage > 0) {
         if (this.itemPage >= this.numPages) {
-          this.page = this.numPages
-          this.itemPage = this.page
-        } else {
-          this.page = this.itemPage
+          this.itemPage = this.numPages
         }
-        this.$emit('page', this.page)
+      } else {
+        this.itemPage = 1
+      }
+      this.$emit('page', this.itemPage)
+    },
+    zoomIn() {
+      let numScale = window.parseInt(this.itemScale)
+      if (Number.isNaN(numScale)) {
+        numScale = 100
+        this.itemScale = `${numScale}%`
+        this.$emit('zoom', numScale / 100)
+      }
+      if (numScale > minscale * 100) {
+        numScale -= 10
+        this.itemScale = `${numScale}%`
+        this.$emit('zoom', numScale / 100)
+      }
+    },
+    zoomOut() {
+      let numScale = window.parseInt(this.itemScale)
+      if (Number.isNaN(numScale)) {
+        numScale = 100
+        this.itemScale = `${numScale}%`
+        this.$emit('zoom', numScale / 100)
+      }
+      if (numScale < maxscale * 100) {
+        numScale += 10
+        this.itemScale = `${numScale}%`
+        this.$emit('zoom', numScale / 100)
       }
     },
+    onZoomChange() {
+      const numScale = window.parseInt(this.itemScale)
+      this.$emit('zoom', numScale / 100)
+    },
+    rotateRight() {
+      this.$emit('rotate', this.itemRotate + 90)
+    },
+    rotateLeft() {
+      this.$emit('rotate', this.itemRotate - 90)
+    },
   },
 }
 </script>
 
-<style lang="css" scoped>
+<style lang="less" scoped>
 .switch-page {
   margin: 0;
   padding: 0;
-  overflow: auto;
+  display: flex;
+  flex-direction: row;
+  .switch-page-scale{
+    flex: 1;
+    text-align: center;
+  }
 }
 .switch-page button {
-  font-size: 16px;
+  font-size: 14px;
   padding: 6px !important;
 }
 </style>