@toolspack/ttd-pdfjs 0.0.9 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toolspack/ttd-pdfjs",
-  "version": "0.0.9",
+  "version": "0.1.0",
   "private": false,
   "main": "lib/ttd-pdfjs.umd.min.js",
   "scripts": {
@@ -22,9 +22,9 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-babel": "~4.5.11",
     "@vue/cli-plugin-eslint": "~4.5.11",
-    "@vue/cli-service": "~4.5.0",
+    "@vue/cli-service": "^4.5.11",
     "@vue/eslint-config-airbnb": "^5.3.0",
     "babel-eslint": "^10.1.0",
     "babel-plugin-component": "^1.1.1",

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">
@@ -9,12 +11,13 @@
           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 class="canvasstyle" ref="canvas"></canvas>
+          <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>
@@ -56,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/
@@ -64,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: {
@@ -74,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,
@@ -104,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: {
@@ -117,57 +138,67 @@ export default {
   },
   methods: {
     async renderPage(num) {
+      console.log('renderPage ', this.pageRendering)
+      if (this.pageRendering) {
+        this.pageNumPending = num;
+      } else {
       // 渲染pdf
-      const vm = this
-      this.pageRendering = true
-      // Using promise to fetch the page
-      try {
-        const page = await this.pdfDoc.getPage(num)
-        let scaleNum = vm.compuscale
-        let viewport = ''
-        const viewboxWidth = this.showWidth
-        if (this.initPage && viewboxWidth) {
-          const desiredWidth = parseInt(viewboxWidth, 10) - 2
-          // 首先获得pdf 原本宽度，然后根据showWidth 计算缩放倍数
-          viewport = page.getViewport({ scale: 1.0 })
-          scaleNum = desiredWidth / viewport.width
-          this.initPage = false
-          this.compuscale = scaleNum
-          this.maxscale = scaleNum
+        const vm = this
+        this.pageRendering = true
+        // Using promise to fetch the page
+        if (!this.pdfDoc) {
+          return false
         }
-        // 重新渲染 缩放过的PDF
-        viewport = page.getViewport({ scale: scaleNum })
-        this.viewport = viewport
+        try {
+          const page = await this.pdfDoc.getPage(num)
+          let scaleNum = vm.compuscale
+          let viewport = ''
+          const viewboxWidth = this.showWidth
+          if (this.initPage && viewboxWidth) {
+            const desiredWidth = parseInt(viewboxWidth, 10) - 2
+            // 首先获得pdf 原本宽度，然后根据showWidth 计算缩放倍数
+            viewport = page.getViewport({ scale: 1.0 })
+            scaleNum = desiredWidth / viewport.width
+            this.initPage = false
+            this.compuscale = scaleNum
+            this.maxscale = scaleNum
+          }
+          // 重新渲染 缩放过的PDF
+          viewport = page.getViewport({ scale: scaleNum, rotation: this.compuRotate })
+          this.viewport = viewport
 
-        // 将 canvas 尺寸 传给父组件
-        this.$emit('size', viewport, num)
+          // 将 canvas 尺寸 传给父组件
+          this.$emit('size', viewport, num)
 
-        // Render PDF page into canvas context
-        vm.isready = true
+          // Render PDF page into canvas context
+          vm.isready = true
 
-        const { canvas } = vm.$refs
+          const { canvas } = vm.$refs
 
-        this.style.width = `${viewport.width + 2}px`;
-        canvas.height = viewport.height
-        canvas.width = viewport.width
+          this.style.width = `${viewport.width + 2}px`;
+          canvas.height = viewport.height
+          canvas.width = viewport.width
 
-        const renderContext = {
-          canvasContext: canvas.getContext('2d'),
-          viewport,
-        }
-        // Wait for rendering to finish
-        await page.render(renderContext).promise
-        vm.pageRendering = false
-        if (vm.pageNumPending !== null) {
+          const renderContext = {
+            canvasContext: canvas.getContext('2d'),
+            viewport,
+          }
+          // Wait for rendering to finish
+          await page.render(renderContext).promise
+          // console.log(' await page.render 168')
+          vm.pageRendering = false
+          if (vm.pageNumPending !== null) {
           // New page rendering is pending
-          vm.renderPage(vm.pageNumPending)
-          vm.pageNumPending = null
+            vm.renderPage(vm.pageNumPending)
+            vm.pageNumPending = null
+          }
+          this.$emit('renderSuccess')
+        } catch (error) {
+          console.error(error)
+        } finally {
+          // console.log('finally 178')
+          this.pageRendering = false
         }
-        this.$emit('renderSuccess')
-      } catch (error) {
-        console.error(error)
-      } finally {
-        this.pageRendering = false
       }
     },
     prev() {
@@ -206,13 +237,15 @@ export default {
         }
         this.viewport = null
         this.pdfDoc.destroy();
+        // console.log('closepdf end')
       }
-      this.pdfDoc = null
+      // this.pdfDoc = null
       this.isready = false
       this.compuscale = this.scale
       this.$emit('closepdf')
     },
     queueRenderPage(num) {
+      // console.log('queueRenderPage 226', this.pageRendering)
       if (this.pageRendering) {
         this.pageNumPending = num
       } else {
@@ -231,6 +264,10 @@ export default {
       //   console.log('-----encodeURI------', url)
       // }
       console.log('----PdfView---', url)
+      if (this.pdfDoc) {
+        // console.log('pdfDocument is ready  destroy,,')
+        this.pdfDoc.destroy();
+      }
       let pdfDoc_
       try {
         pdfDoc_ = await PDFJS.getDocument({
@@ -249,16 +286,13 @@ export default {
       } finally {
         this.fileLoading = false
       }
-
-      // 初始化pdf
-      if (this.pdfDoc) {
-        console.log('pdfDocument is ready  destroy,,')
-        await this.closepdf();
-        this.pdfDoc = null
-      }
+      // console.log('pdfDoc_', pdfDoc_)
+      // debugger
       this.pdfDoc = pdfDoc_
+      // 初始化pdf
       this.page_count = pdfDoc_.numPages
       this.$emit('numPages', pdfDoc_.numPages)
+      // console.log('265', this.pageRendering)
       this.renderPage(this.pageNum)
       this.emitPage(this.pageNum)
     },
@@ -272,15 +306,19 @@ export default {
     },
     updateScale() {
       this.compuscale = this.scale
+      // 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)
@@ -289,21 +327,34 @@ 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) {
+        // console.log('watch url change: ', val)
+        if (this.pdfDoc) {
+          // console.log('closepdf')
+          this.closepdf();
+        }
         this.$nextTick(() => {
           if (val) {
             this.pageNum = 1
             this.initPage = true
             this.loadUrl(val)
-            if (this.pdfDoc) {
-              this.closepdf();
-            }
           }
           if (this.showPages) {
             this.$refs.switchPage.setPage(1)
@@ -314,7 +365,13 @@ export default {
     },
     // 监听页码变化，渲染对应合同页
     page(newPage, oldPage) {
-      this.queueRenderPage(newPage)
+      // console.log('watch page change: ', newPage)
+      if (this.pdfDoc) {
+        this.queueRenderPage(newPage)
+      } else {
+        this.pageNum = newPage
+        // console.log('no pdfDoc')
+      }
     },
   },
 }

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>