zydx-plus 1.6.25 → 1.7.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.6.25",
+  "version": "1.7.25",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [
@@ -21,7 +21,9 @@
   "author": "",
   "peerDependencies": {
     "vue": "^3.2.13",
-    "vue-draggable-next": "^2.1.1"
+    "vue-draggable-next": "^2.1.1",
+    "pdfjs-dist": "^3.4.120",
+    "flipbook-vue": "^1.0.0-beta.4"
   },
   "devDependencies": {
     "@vue/component-compiler-utils": "^2.6.0",

package/src/components/flip/index.js

@@ -0,0 +1,6 @@
+import main from './src/flip';
+
+main.install = function(Vue) {
+    Vue.component(main.name, main);
+};
+export default main;

package/src/components/flip/src/flip.vue

@@ -0,0 +1,134 @@
+<template>
+  <div id="docView">
+    <div class="pdf-container">
+      <canvas :id="'pdf-canvas'+ index" v-for="(item,index) in pdfPages" class="pdf-canvas"></canvas>
+    </div>
+    <div class="book">
+      <flipbook class="flipbook" :pages="imgArr" @flip-left-end="flipLeft" @flip-right-end="flipRight" v-slot="flipbook" :singlePage="singlePage" :ambient="0" :gloss="1" :dragToFlip="false" :pagesHiRes="0">
+        <div class="but">
+          <button class="but-brown" @click="flipbook.flipLeft">上一页</button>
+          <button class="but-brown" @click="flipbook.flipRight">下一页</button>
+        </div>
+      </flipbook>
+    </div>
+  </div>
+</template>
+
+<script>
+import flipbook from 'flipbook-vue'
+import * as PdfJs from 'pdfjs-dist/legacy/build/pdf.js' // 注意导入的写法
+PdfJs.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.entry')
+export default {
+  name: "zydx-flip",
+  components: {flipbook},
+  data() {
+    return {
+      pdfPages: 0,
+      imgArr: [],
+      hei: 0
+    }
+  },
+  props: {
+    source: {
+      type: String,
+      default: ''
+    },
+    singlePage: {
+      type: Boolean,
+      default: false
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.readPdf()
+    })
+  },
+  methods: {
+    flipLeft(e) {
+      this.$emit('flip',e)
+    },
+    flipRight(e) {
+      this.$emit('flip',e)
+    },
+    readPdf() {
+      let that = this
+      const loadingTask = PdfJs.getDocument(this.source)
+      loadingTask.promise.then((pdf) => {
+        that.pdfPages = pdf.numPages // 获取pdf文件的总页数
+        for(let i=0; i<that.pdfPages; i++) {
+          pdf.getPage(i+1).then(function(page) {
+            const canvas = document.getElementById('pdf-canvas' + i)
+            const ctx = canvas.getContext('2d')
+            const dpr = window.devicePixelRatio || 1
+            const bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1
+            const ratio = dpr / bsr
+            const viewport = page.getViewport({ scale: 1 })
+            canvas.width = viewport.width * ratio
+            canvas.height = viewport.height * ratio
+            canvas.style.width = viewport.width + 'px'
+            canvas.style.height = viewport.height + 'px'
+            ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
+            const renderContext = {
+              canvasContext: ctx,
+              viewport: viewport
+            }
+            page.render(renderContext)
+          });
+        }
+        setTimeout(() => {
+          for(let i=0; i<that.pdfPages; i++) {
+            const canvas = document.getElementById('pdf-canvas' + i)
+            const dataURL = canvas.toDataURL("image/jpeg",1); //获取Base64编码
+            that.imgArr.push(dataURL)
+          }
+        },0)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+#docView{
+  height: 100%;
+}
+.but-brown{
+  background-color: #c64c10;
+  padding: 0 20px;
+  font-size: 12px;
+  color: #fff;
+  height: 24px;
+  line-height: 24px;
+  border-radius: 5px;
+  border: 0;
+  cursor: pointer;
+  margin-left: 10px;
+}
+.but{
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  text-align: center;
+}
+.book{
+  width: 100%;
+  height: 100%;
+}
+.flipbook {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  padding-bottom: 24px;
+}
+.pdf-container{
+  position: relative;
+}
+  .pdf-canvas{
+    position: absolute;
+    top: -100000px;
+    left: 0;
+    z-index: -100;
+  }
+</style>

package/src/index.js

@@ -11,6 +11,7 @@ import Table from './components/data_table/index';
 import buttonGroup from './components/buttonGroup/index';
 import spinner from './components/spinner/index';
 import treeList from './components/treeList/index';
+import flip from './components/flip/index';
 
 const components = [
     Calendar,
@@ -23,7 +24,8 @@ const components = [
     Year,
     Table,
     buttonGroup,
-    treeList
+    treeList,
+    flip
 ];
 
 function install(app) {
@@ -35,7 +37,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.6.25',
+    version: '1.7.25',
     install,
     Calendar,
     Message,
@@ -49,6 +51,7 @@ export default {
     Year,
     Table,
     buttonGroup,
-    treeList
+    treeList,
+    flip
 };